oliverdavies.uk/content/node.44dcbb55-20f6-4737-9557-d6301fca587d.yml

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: |
      <p>There are three ways to add custom styles to a Tailwind CSS project. As there have been <a href="https://twitter.com/adamwathan/status/1559250403547652097">some recent tweets</a> around one of them - the <code>@apply</code> directive - I'd like to look at and give examples for each.</p>

      <h2 id="what-is-%60%40apply%60%3F">What is <code>@apply</code>?</h2>

      <p><code>@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>

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

      <p>For example:</p>

      <pre><code class="css">fieldset {
        @apply bg-primary-dark;
      }
      </code></pre>

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

      <p>Adam said in a another tweet:</p>

      <blockquote>
        <p>I estimate that we spend at least $10,000/month trying to debug extremely edge-case issues people run into by using <code>@apply</code> in weird ways.</p>
      </blockquote>

      <h2 id="using-the-%60theme%60-function">Using the <code>theme</code> function</h2>

      <p>As well as <code>@apply</code>, Tailwind also provides a <code>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 <code>theme</code> section of your tailwind.config.js file.</p>

      <pre><code class="css">fieldset {
        backgroundColor: theme('colors.primary.dark');
      }
      </code></pre>

      <p>This seems to be the preferred approach over using <code>@apply</code>.</p>

      <h2 id="creating-a-custom-plugin">Creating a custom plugin</h2>

      <p>The <code>theme</code> function is also available if you write a custom Tailwind CSS plugin:</p>

      <pre><code class="javascript">const plugin = require('tailwindcss/plugin')

      plugin(({ addBase, theme }) =&gt; {
        addBase({
          fieldset: {
            backgroundColor: theme('colors.primary.dark'),
          }
        })
      })
      </code></pre>

      <p>This is an approach that I've used for <a href="https://github.com/opdavies?tab=repositories&amp;q=%23tailwindcss-plugin">generic, open-source plugins</a> but for project-specific styling, I've mostly used <code>@apply</code> or the <code>theme</code> function.</p>

      <p>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 <code>plugins</code> array.</p>

      <p>I usually don't write many custom styles in a Tailwind project but I think that I'll focus on using the <code>theme</code> function going forward, either in a stylesheet or a custom plugin.</p>

              
    format: full_html
    processed: |
      <p>There are three ways to add custom styles to a Tailwind CSS project. As there have been <a href="https://twitter.com/adamwathan/status/1559250403547652097">some recent tweets</a> around one of them - the <code>@apply</code> directive - I'd like to look at and give examples for each.</p>

      <h2 id="what-is-%60%40apply%60%3F">What is <code>@apply</code>?</h2>

      <p><code>@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>

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

      <p>For example:</p>

      <pre><code class="css">fieldset {
        @apply bg-primary-dark;
      }
      </code></pre>

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

      <p>Adam said in a another tweet:</p>

      <blockquote>
        <p>I estimate that we spend at least $10,000/month trying to debug extremely edge-case issues people run into by using <code>@apply</code> in weird ways.</p>
      </blockquote>

      <h2 id="using-the-%60theme%60-function">Using the <code>theme</code> function</h2>

      <p>As well as <code>@apply</code>, Tailwind also provides a <code>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 <code>theme</code> section of your tailwind.config.js file.</p>

      <pre><code class="css">fieldset {
        backgroundColor: theme('colors.primary.dark');
      }
      </code></pre>

      <p>This seems to be the preferred approach over using <code>@apply</code>.</p>

      <h2 id="creating-a-custom-plugin">Creating a custom plugin</h2>

      <p>The <code>theme</code> function is also available if you write a custom Tailwind CSS plugin:</p>

      <pre><code class="javascript">const plugin = require('tailwindcss/plugin')

      plugin(({ addBase, theme }) =&gt; {
        addBase({
          fieldset: {
            backgroundColor: theme('colors.primary.dark'),
          }
        })
      })
      </code></pre>

      <p>This is an approach that I've used for <a href="https://github.com/opdavies?tab=repositories&amp;q=%23tailwindcss-plugin">generic, open-source plugins</a> but for project-specific styling, I've mostly used <code>@apply</code> or the <code>theme</code> function.</p>

      <p>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 <code>plugins</code> array.</p>

      <p>I usually don't write many custom styles in a Tailwind project but I think that I'll focus on using the <code>theme</code> function going forward, either in a stylesheet or a custom plugin.</p>

              
    summary: null
field_daily_email_cta: {  }