I propose to add an alternative to JS-in-CSS when building plugins.

[NnicanBuak]

What if there was an alternative to using the not-so-friendly JS-in-CSS syntax versus Utility Tailwindcss classes? It would make it very easy to create custom components and base styles inside Tailwindcss.

Let`s make Tailwind more Utility.

What it looks like now:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.button': {
          padding: theme('padding.1'),
          borderRadius: theme('borderRadius.xl'),
          fontWeight: '600',
        },
        '.button-primary': {
          backgroundColor: theme(colors.primary),
          color: theme(colors.white),
          '&:hover': {
            backgroundColor: theme(colors.secondary),
          },
          dataPonterType: 'highlight'
        },
      })
    })
  ]
}

---

What it might look like with the new tailwind() plugin feature (this function does not exclude the existence of theme()):

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents, tailwind }) {
      addComponents({
        '.button': tailwind('p-1 rounded-xl font-[600]'),
        '.button-primary': {
          tailwind('bg-primary text-white hover:bg-secondary'),
          dataPonterType: 'highlight'
          },
        },
      })
    })
  ]
}

The main improvement this feature brings is the unification of the syntax approach in the application and in the Tailwind config.

This feature is especially useful when you want to write not just styles, but styles referencing the theme(), as in the example.

[wongjn]

You can actually do this already with @apply, like:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.button': {
           '@apply p-1 rounded-xl font-[600]': {},
        },
        '.button-primary': {
          '@apply bg-primary text-white hover:bg-secondary': {},
          dataPonterType: 'highlight'
        },
      })
    })
  ]
}

[wongjn]

1. The documentation does not say anywhere that we can use @apply like that.
2. The empty braces after @apply are to give a value to the object key. A value must be given for an object key, otherwise it would be a JavaScript syntax error.

[vigetlabs-anthony]

Thanks for confirming, I dug through the docs and looks like you're right.

I know that the docs doesn't say that we could use @apply like that, but would you happen to know why or how @apply works like that? I did look over the CSS-in-JS section and have a general idea, but want to understand the mechanics.

[wongjn]

The CSS is generated before @apply rules are "expanded" by Tailwind.

[adamwathan]

The CSS is generated before @apply rules are "expanded" by Tailwind.

Yep exactly, it works by coincidence not by design 🤪

[elbotho]

For future versions of Tailwind we're working on some features to encourage doing more of this sort of thing in CSS vs. your config file — to me that's the more sensible place to write custom style stuff.

Just a quick question from the future 🔮 @adamwathan:
Is there anything planed that we can write and export CSS (instead of CSS-in-JS) from plugins?

Right now the DX is pretty poor here (no autocomplete etc. unless I'm doing something wrong).

[NnicanBuak]

(this function does not exclude the existence of theme())

Although, the tailwind() function could be an advanced version of theme(), but removing theme() is impossible.