Tips for Tailwind CSS

Tips

https://tips.rstankov.com/p/tips-for-tailwind-css

Links

https://newsletter.pragmaticengineer.com/p/the-pragmatic-engineer-2025-survey-part-3
https://2025.stateofcss.com/en-US/other-tools/
https://www.youtube.com/watch?v=TNXM4bqGqek
https://tailwindcss.com/build-uis-that-dont-suck
https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups
https://tailwindcss.com/docs/grid-template-columns

Transcript

1. Radoslav Stankov Tips for
2. !
3. Radoslav Stankov @rstankov rstankov.com
4. https://tips.rstankov.com
8. https://newsletter.pragmaticengineer.com/p/the-pragmatic-engineer-2025-survey-part-3
9. https://2025.stateofcss.com/en-US/other-tools/
11. ⚙ utility first ! easy to learn ! small CSS bundle ! no thinking about naming ! mobile first ! constancy in UI ! fast prototyping
18. ! Learn the basics ! TIP 0
19. https://www.youtube.com/watch?v=TNXM4bqGqek
20. https://tailwindcss.com/build-uis-that-dont-suck
21. ! Setup your environment ! TIP 1
22. 1. VSCode extension 2. ESLint plugin 3. Figma plugin 3. Dash for Tailwind 4. ... ! TIP 1
24. +
25. +
26. ! Don't use Tailwind without a component system ! TIP 2
27. ! Parameterizing components ! TIP 3
28. <Text className="text-sm" />
29. <Text /> <Text size="sm" /> <Text size="lg" /> ! Targeted props
30. const SIZES = { "sm": "text-sm" "base": "text-base" "lg": "text-lg font-semibold" } type IProps = { size?: keyof typeof SIZES } function Text({ size: "base" }): IProps { // ... } ! Targeted props
31. ! Variants
32. ! Variants As property <Button variant="primary"> <Button variant="secondary"> <Button variant="small"> As component <Button.Primary> <Button.Secondary> <Button.Small>
33. ! Margins // Bad <div> <MyComponent /> <MyComponent className="ml-2" /> </div>
34. ! Margins // Slightly better <div> <MyComponent /> <div className="pl-2"> <MyComponent /> </div> </div>
35. ! Margins // Better <div className="flex gap-2"> <MyComponent /> <MyComponent /> </div>
36. ✍ Write CSS when needed ! TIP 4
37. Every custom Tailwind class name gets into your CSS bundle. If you have many pages using code-splitting and separate CSS bundles, you might want to avoid custom classnames.
38. ⚖ Rules - avoid from Tailwind 1/ arbitrary values or variables <div class="bg-[#bada55] text-[22px]"> <div class="text-(--my-var)">...</div> 2/ arbitrary properties <div class="[mask-type:luminance]"> 3/ complex selectors <div class="[&>[data-active]+span]:text-blue-600 ..."> (except in prototyping)
39. ⚖ Rules - when to have custom CSS 1/ What I want doesn’t have a Tailwind equivalent. Some fancy grid setups and things are dependent on CSS variables. 2/ Tailwind classes get too interconnected and hard to reason about. Usually involving styling multiple child components. When the “Cascading” part of CSS is needed. 3/ Automatic style. Style is applied when a data attribute is applied to an HTML element. 4/ I want to reuse a class name, not a whole component. Example - inputs, containers and similar
40. ⚖ Rules - how to have custom CSS In React projects, I use the CSS module in the same folder as the component. In Ruby on Rails projects, prefix all classes with “c-”, like “c- input” or “c-button-primary”. Rely on @apply, a directive to reuse Tailwind classes in my custom classes. In this way, I don’t have to remember how much is “gap-2” or “mt-3” or what is in “text-sm”
41. ! Couple of cool tricks ! TIP 5
42. function MyButton() { const [isHovered, setIsHovered] = useState(false); const className = isHovered ? 'button button-hover' : 'button'; const onMouseEnter = () => setIsHovered(true); const onMouseLeave = () => setIsHovered(false); return ( <button className={className} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>Button</button> ); }
44. group https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups
45. <div class="group"> <span class="group-hover:bg-cloud"> When parent element (group) is hovered, I change background </span> <span> I don't change color </span> </div>
46. grid https://tailwindcss.com/docs/grid-template-columns
47. <div class="grid grid-rows-3 grid-flow-col gap-4"> <div class="row-span-3 ...">01</div> <div class="col-span-2 ...">02</div> <div class="row-span-2 col-span-2 ...">03</div> </div>
49. Recap
50. 0/ ! Learn the basics 1/ ! Setup your environment 2/ ! Don't use Tailwind without a component system 3/ ! How to parameterize components 4/ ✍ Write CSS when needed 5/ ! Tricks - group and grid ! Recap
51. https://tips.rstankov.com
52. https://rstankov.com/appearances
53. https://rstankov.com/appearances