From 4b4604ca13196950a503c3da89507302b4c31ff0 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 11 Jul 2024 23:19:52 +0100 Subject: [PATCH] Add daily email for 2024-07-10 Applying all the things --- source/_daily_emails/2024-07-10.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 source/_daily_emails/2024-07-10.md diff --git a/source/_daily_emails/2024-07-10.md b/source/_daily_emails/2024-07-10.md new file mode 100644 index 000000000..d9d2490ab --- /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.