search

ecklf / tailwindcss-figma-plugin

Figma Plugin for Tailwind CSS
https://www.figma.com/community/plugin/738806869514947558/Tailwind-CSS
MIT License
269 stars 16 forks source link

Update to Tailwind 2.0 #122

Closed helloworld closed 3 years ago

helloworld commented 3 years ago

It would be really nice if this plugin was updated to use tailwind 2.0

ecklf commented 3 years ago

@helloworld there should be no breaking changes with v2. Can you elaborate?

helloworld commented 3 years ago

Sorry for not adding more detail here!

I believe the main functionality of this plugin is to import the color palette from your tailwind config, and tailwind 2.0 came out with a new color palette: https://blog.tailwindcss.com/tailwindcss-v2.

So if I paste in my config meant for tailwind 2.0, I won't get the colors I expect and will instead get the v1 colors.

Also, even though there are limited breaking changes other than colors, there were several new features released so I believe using a config file with tailwind 2.0 specific settings will break the plugin.

Btw, thanks for making this–it's exactly what I was looking for.

ecklf commented 3 years ago

@helloworld, ah I see. The default values shipped with the plugin still contain the v1 values. However if you use npx tailwind.json in your project it will generate an importable file matching your config. The plugin functionality itself shouldn't be breaking for v2.

helloworld commented 3 years ago

That makes sense, thanks!

helloworld commented 3 years ago

Hey @impulse, I tried what you suggested but unfortunately I'm getting the following error:

image

I generated this file using npx taiwlindcss init --full: https://gist.github.com/helloworld/0da33bc290f71c92ef1e3d9773202e80

ramiraza commented 3 years ago

I'm experiencing the same problem so I opened an issue for this.

ecklf commented 3 years ago

@helloworld @ramiraza I just tested and there is no breaking change for v2 in this plugin. I'll change the wording for the upload field since you are not supposed to drag in your tailwind config anymore. You need to run npx tailwind.json in your project and import the generated tailwind.json file instead (as mentioned above).