Skip to content

Upgrade to TailwindCSS v3 #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Conversation

coding-chimp
Copy link

This isn't really complete yet, but I wanted to see if this solution is acceptable before going down the rabbit hole too far.

As @dixpac mentioned in #94, Tailwind 3 removed classic mode and now only builds using JIT. This means there is no officially supported way to generate the whole CSS anymore. However, they do support safe listing classes with patterns. So I figure using the broadest pattern possible (.+) should pretty much safelist everything and give us the whole CSS again.

I still need to figure out a way to verify that there isn't anything missing for some reason and figure out which variants were included by default in v2. I'll do that once I get a thumbs up on the approach.

Resolves #94

@dixpac
Copy link
Contributor

dixpac commented Dec 14, 2021

@coding-chimp, good idea, certainly only one that could work atm.
Let me now when you finish the WIP, so I can test it :)

As for the variants only default for TW 2 are included https://v2.tailwindcss.com/docs/configuring-variants#default-variants-reference, but I guess we should include TW 3 default variants if that doesn't increase the file size too much.

@coding-chimp
Copy link
Author

Yeah, I don't think this works like I want it to work. 😔

I updated the config to only use variants enabled in v2 and am already getting a 10.4MB file. It basically generates all the base classes and then duplicates and prefixes all of them for each variant. For one, this means the file is getting a little bloated, but even worse, it does not actually apply the styling associated with the variants. Most variants (hover, focus, etc.) don't have any special styling, but it does break the responsive variant.

@dhh
Copy link
Member

dhh commented Dec 14, 2021

We can't support 3.0 with the current approach. The TW team has some ideas on how we can work around it, but we need help from their end.

@dhh dhh closed this Dec 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Upgrade to Tailwind CSS v3
3 participants