Open muhajirdev opened 6 years ago
@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.
Hey @muhajirframe
There are a few notable differences:
tw`bg-red`
// vs
tw('bg-red')
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%'
}
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?
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
Thinking about it some more, I think it might be doable! I will have a look when I get chance.
Ah, got it.
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
What's the difference with https://github.com/andrewdelprete/babel-plugin-tailwind ?