---
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.