"value":"\n <p>If you're adding Tailwind CSS to your existing project or can't use atomic\/utility classes straight away, the <code>@apply<\/code> directive might be an option.<\/p>\n\n<p>It's a way to extract components within CSS using the same classes you'd add to the element.<\/p>\n\n<p>Here's a quick example:<\/p>\n\n<pre><code class=\"css\">.btn {\n @apply py-3 px-6 bg-red text-white hover:bg-green focus:bg-green;\n}\n<\/code><\/pre>\n\n<p>It works with interaction states, such as hover and focus states, too.<\/p>\n\n<p>It's not something I use or recommend often, but it could be a good way to get started.<\/p>\n\n<p>Just don't overuse it.<\/p>\n\n ",
"format":"full_html",
"processed":"\n <p>If you're adding Tailwind CSS to your existing project or can't use atomic\/utility classes straight away, the <code>@apply<\/code> directive might be an option.<\/p>\n\n<p>It's a way to extract components within CSS using the same classes you'd add to the element.<\/p>\n\n<p>Here's a quick example:<\/p>\n\n<pre><code class=\"css\">.btn {\n @apply py-3 px-6 bg-red text-white hover:bg-green focus:bg-green;\n}\n<\/code><\/pre>\n\n<p>It works with interaction states, such as hover and focus states, too.<\/p>\n\n<p>It's not something I use or recommend often, but it could be a good way to get started.<\/p>\n\n<p>Just don't overuse it.<\/p>\n\n ",