diff --git a/source/_daily_emails/2024-07-10.md b/source/_daily_emails/2024-07-10.md new file mode 100644 index 00000000..d9d2490a --- /dev/null +++ b/source/_daily_emails/2024-07-10.md @@ -0,0 +1,30 @@ +--- +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.