Feature idea: Tailwind config output

[ben-rogerson]

Hey there, Congrats on the launch!

I was thinking that a Tailwind plugin output would make a good feature. I've modified an example from their docs to illustrate how the output could be displayed:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addComponents }) {
      const capsizedText = {
        '.capsizedText': {
          fontSize: '71.73626373626374px',
          lineHeight: '76px',
          padding: '0.05px 0',
          ':before': {
            content: "''",
            marginTop: '-0.16127450980392152em',
            display: 'block',
            height: 0,
          },
          ':after': {
            content: "''",
            marginBottom: '-0.18861825980392152em',
            display: 'block',
            height: 0,
          },
        },
      }
      addComponents(capsizedText)
    }),
  ],
}

What do you think?

[apkoponen]

As a Tailwind user, I'm not 100% sure a plugin would be super beneficial. You can already just copy-paste the CSS output to your index.css file.

I'm transitioning my own tailwind-baseline (https://github.com/apkoponen/tailwind-baseline) plugin from the old "basekick" algorithm to the "capsize" version right now. In the plugin, the idea is that you can just add a baseline class to your element and it respects the font-${fontFamily}, text-${sizeName}, and leading-${leading} class you have defined for the element. Otherwise, you'd need classes like capsize-sans-2xl-tight in order to support all the font-family, size, and line-height combinations you want to use in your app.

[michaeltaranto]

Personally I agree. Without being a tailwind user, that appears to be just boilerplate wrapped around the css-in-js view.

Is there something I'm missing?

[ben-rogerson]

Some people may want to define the class in their config as an alternative to using the css output. I could be a little bias as that would be how you'd get custom classes into twin.

@apkoponen that plugin looks interesting, thanks for sharing.

[SergiArias]

@apkoponen I always used a capsize similar implementation using before and after pseudoclasses. But I am wondering if it's the right approach. For example, if you have two inline elements p + p, this approach won't work as the margins don't add. And if you need a pseudoclass in the element it forces you to create a wrapper of some kind to free the pseudoclasses (this usually happens to ul>li elements if you want a custom bullet). As I never used basekick before, can you tell me why you prefer the capsize option versus the basekick?