{ "uuid": [ { "value": "44dcbb55-20f6-4737-9557-d6301fca587d" } ], "langcode": [ { "value": "en" } ], "type": [ { "target_id": "daily_email", "target_type": "node_type", "target_uuid": "8bde1f2f-eef9-4f2d-ae9c-96921f8193d7" } ], "revision_timestamp": [ { "value": "2025-05-11T09:00:55+00:00" } ], "revision_uid": [ { "target_type": "user", "target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849" } ], "revision_log": [], "status": [ { "value": true } ], "uid": [ { "target_type": "user", "target_uuid": "b8966985-d4b2-42a7-a319-2e94ccfbb849" } ], "title": [ { "value": "Custom styles in Tailwind CSS: `@apply`, `theme` or custom plugins" } ], "created": [ { "value": "2022-09-11T00:00:00+00:00" } ], "changed": [ { "value": "2025-05-11T09:00:55+00:00" } ], "promote": [ { "value": false } ], "sticky": [ { "value": false } ], "default_langcode": [ { "value": true } ], "revision_translation_affected": [ { "value": true } ], "path": [ { "alias": "\/daily\/2022\/09\/11\/custom-styles-tailwind-css-apply-theme-custom-plugins", "langcode": "en" } ], "body": [ { "value": "\n

There are three ways to add custom styles to a Tailwind CSS project. As there have been some recent tweets<\/a> around one of them - the @apply<\/code> directive - I'd like to look at and give examples for each.<\/p>\n\n

What is @apply<\/code>?<\/h2>\n\n

@apply<\/code> is a PostCSS directive, provided by Tailwind, to allow re-using it's classes - either when extracting components or overriding third-party styles.<\/p>\n\n

The CSS file is the same as if you were writing traditional CSS, but rather than adding declarations to a ruleset, you use the @apply<\/code> directive and specify the Tailwind CSS class names that you want to apply.<\/p>\n\n

For example:<\/p>\n\n

fieldset {\n  @apply bg-primary-dark;\n}\n<\/code><\/pre>\n\n
This is a simple example but it's easy to see how this could be used in ways that weren't intended and how edge-cases can be found.<\/p>\n\n
Adam said in a another tweet:<\/p>\n\n
\n  
I estimate that we spend at least $10,000\/month trying to debug extremely edge-case issues people run into by using @apply<\/code> in weird ways.<\/p>\n<\/blockquote>\n\n
Using the theme<\/code> function<\/h2>\n\n
As well as @apply<\/code>, Tailwind also provides a theme<\/code> function that you can use in your CSS file. This removes the abstraction of using the class names and adds the ability to retrieve values from the theme<\/code> section of your tailwind.config.js file.<\/p>\n\n
fieldset {\n  backgroundColor: theme('colors.primary.dark');\n}\n<\/code><\/pre>\n\n
This seems to be the preferred approach over using @apply<\/code>.<\/p>\n\n
Creating a custom plugin<\/h2>\n\n
The theme<\/code> function is also available if you write a custom Tailwind CSS plugin:<\/p>\n\n
const plugin = require('tailwindcss\/plugin')\n\nplugin(({ addBase, theme }) => {\n  addBase({\n    fieldset: {\n      backgroundColor: theme('colors.primary.dark'),\n    }\n  })\n})\n<\/code><\/pre>\n\n
This is an approach that I've used for generic, open-source plugins<\/a> but for project-specific styling, I've mostly used @apply<\/code> or the theme<\/code> function.<\/p>\n\n
That said, I like the modular architecture of having different custom plugins - especially if they're separated into their own files - and being able to easily toggle plugins by simply adding to or removing from the plugins<\/code> array.<\/p>\n\n
I usually don't write many custom styles in a Tailwind project but I think that I'll focus on using the theme<\/code> function going forward, either in a stylesheet or a custom plugin.<\/p>\n\n        ",
            "format": "full_html",
            "processed": "\n          
There are three ways to add custom styles to a Tailwind CSS project. As there have been some recent tweets<\/a> around one of them - the @apply<\/code> directive - I'd like to look at and give examples for each.<\/p>\n\n
What is @apply<\/code>?<\/h2>\n\n
@apply<\/code> is a PostCSS directive, provided by Tailwind, to allow re-using it's classes - either when extracting components or overriding third-party styles.<\/p>\n\n
The CSS file is the same as if you were writing traditional CSS, but rather than adding declarations to a ruleset, you use the @apply<\/code> directive and specify the Tailwind CSS class names that you want to apply.<\/p>\n\n
For example:<\/p>\n\n
fieldset {\n  @apply bg-primary-dark;\n}\n<\/code><\/pre>\n\n
This is a simple example but it's easy to see how this could be used in ways that weren't intended and how edge-cases can be found.<\/p>\n\n
Adam said in a another tweet:<\/p>\n\n
\n  
I estimate that we spend at least $10,000\/month trying to debug extremely edge-case issues people run into by using @apply<\/code> in weird ways.<\/p>\n<\/blockquote>\n\n
Using the theme<\/code> function<\/h2>\n\n
As well as @apply<\/code>, Tailwind also provides a theme<\/code> function that you can use in your CSS file. This removes the abstraction of using the class names and adds the ability to retrieve values from the theme<\/code> section of your tailwind.config.js file.<\/p>\n\n
fieldset {\n  backgroundColor: theme('colors.primary.dark');\n}\n<\/code><\/pre>\n\n
This seems to be the preferred approach over using @apply<\/code>.<\/p>\n\n
Creating a custom plugin<\/h2>\n\n
The theme<\/code> function is also available if you write a custom Tailwind CSS plugin:<\/p>\n\n
const plugin = require('tailwindcss\/plugin')\n\nplugin(({ addBase, theme }) => {\n  addBase({\n    fieldset: {\n      backgroundColor: theme('colors.primary.dark'),\n    }\n  })\n})\n<\/code><\/pre>\n\n
This is an approach that I've used for generic, open-source plugins<\/a> but for project-specific styling, I've mostly used @apply<\/code> or the theme<\/code> function.<\/p>\n\n
That said, I like the modular architecture of having different custom plugins - especially if they're separated into their own files - and being able to easily toggle plugins by simply adding to or removing from the plugins<\/code> array.<\/p>\n\n
I usually don't write many custom styles in a Tailwind project but I think that I'll focus on using the theme<\/code> function going forward, either in a stylesheet or a custom plugin.<\/p>\n\n        ",
            "summary": null
        }
    ]
}