777 B
777 B
| title | date | permalink | tags | cta | snippet | |||
|---|---|---|---|---|---|---|---|---|
| Applying all the things | 2024-07-10 | daily/2024/07/10/applying-all-the-things |
|
~ | Getting started with Tailwind CSS using `@apply`. |
If you're adding Tailwind CSS to your existing project or can't use atomic/utility classes straight away, the @apply directive might be an option.
It's a way to extract components within CSS using the same classes you'd add to the element.
Here's a quick example:
.btn {
@apply py-3 px-6 bg-red text-white hover:bg-green focus:bg-green;
}
It works with interaction states, such as hover and focus states, too.
It's not something I use or recommend often, but it could be a good way to get started.
Just don't overuse it.