Difference with babel-plugin-tailwind

[muhajirdev]

What's the difference with https://github.com/andrewdelprete/babel-plugin-tailwind ?

[josiahdahl]

@muhajirframe That plugin had the last update 6 months ago, this one 13 days ago. It's more up-to-date with the latest version of Tailwind.

[bradlc]

Hey @muhajirframe

There are a few notable differences:

• using a custom Tailwind config is much easier with this plugin
• as far as I can tell with the other plugin your styles won’t update in development if you change your Tailwind config, you have to restart your build. With this plugin your styles will update
• this plugin provides a macro, which is the recommended way to use it because it’s more explicit
• this plugin uses tagged template literals instead of function calls:

  tw`bg-red`
  // vs
  tw('bg-red')
  

• this plugin doesn’t support Tailwind plugins

[bradlc]

The two plugins have fundamentally different approaches. The other one takes a compiled Tailwind CSS file and creates a list of class names from that, whereas this plugin does not require a CSS file at all, it works directly from your Tailwind config.

Here’s how this plugin transforms your code in development:

import tw from 'tailwind.macro'
let styles = tw`w-1/2`

// ↓↓↓↓↓↓↓↓

import _tailwind from './path/to/your/tailwind.js'
let styles = {
  width: _tailwind.widths['1/2']
}

And when run in production (NODE_ENV=production):

import tw from 'tailwind.macro'
let styles = tw`w-1/2`

// ↓↓↓↓↓↓↓↓

let styles = {
  width: '50%'
}

[muhajirdev]

Woah, thank you very much @bradlc @josiahdahl .

Love what you do.

About this plugin doesn’t support Tailwind plugins. Is it intentionally by design, or you're still working on this?

[bradlc]

No plans to support plugins right now. Not sure how feasible it is.

Since you’re in CSS-in-JS-land anyway, you can write your own "plugins" in JavaScript, or use something like polished

[bradlc]

Thinking about it some more, I think it might be doable! I will have a look when I get chance.

[muhajirdev]

Ah, got it.

[andrewdelprete]

Hey awesome job on the macro approach. I wrote babel-plugin-tailwind as my first experiment with doing the AST stuff. I do plan on making some adjustments in the near future to update it with the latest version of Tailwind, but I think your approach is spot on. 🙌🏻 // @bradlc