Which Way to Choose
You now know several ways to style an element with Tailwind. Here's when to use which:
| What you need | What to use | Example |
|---|---|---|
| To style an element (most of the time) | utility classes in the HTML | p-4 text-center |
| A value you use only once, which isn't in the theme | an arbitrary value | w-[350px] |
| The colors, fonts and other values of your design, used in many places | the theme: @theme | --color-brand-500 |
| The same list of classes on many elements | a template or a component, if you have them, or editing all the places at once; otherwise a class with @apply in @layer components | .btn |
| CSS that Tailwind has no class for, also with variants | @utility | bg-stripes |
And two more pieces of advice:
- Don't make a class for everything. If every element got its own class with
@apply, you'd be back to writing rules as in the CSS course, only in a different way. You'd lose what makes Tailwind handy: you see the look in the HTML, and you don't have to think up names. Keep@applyfor small pieces that repeat often: buttons, badges, form fields. - An arbitrary value used twice belongs in the theme. Square brackets are fine for a one-off, such as the exact width of a logo. But when the same value shows up again, it's part of your design: give it a name in
@theme.
Our page has two arbitrary values that belong in the theme. When it was made, someone copied two colors from the shelter's design as arbitrary values: the hero's background bg-[#ffedd5] and the Donate link's text-[#ea580c]. Look closely: #ea580c is our brand-600. And #ffedd5 is a light shade of the same orange, so it belongs among the brand colors too, as brand-100.
Instructions
In @theme, add the color --color-brand-100: #ffedd5;.
On the hero section, replace bg-[#ffedd5] with bg-brand-100.
On the Donate link in the header, replace text-[#ea580c] with text-brand-600.
Start programming for free
6/7