31 lines
785 B
Markdown
31 lines
785 B
Markdown
|
---
|
||
|
|
title: Applying all the things
|
||
|
|
date: 2024-07-10
|
||
|
|
permalink: daily/2024/07/10/applying-all-the-things
|
||
|
|
tags:
|
||
|
|
- software-development
|
||
|
|
- css
|
||
|
|
- tailwind-css
|
||
|
|
cta: ~
|
||
|
|
snippet: |
|
||
|
|
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:
|
||
|
|
|
||
|
|
```css
|
||
|
|
.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.
|