Skip to content
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

Add experimental support for Tailwind CSS v4 #420

Merged
merged 3 commits into from
Oct 17, 2024

Conversation

flavorjones
Copy link
Member

@flavorjones flavorjones commented Oct 17, 2024

Tailwind CSS v4 is a big overhaul in how tailwind detects CSS classes. Instead of specifying config and input files, the CLI scans the entire project directory.

More information on this change here: https://tailwindcss.com/blog/tailwindcss-v4-alpha

This PR updates the build and watch commands to skip the -i and -c parameters if the version of Tailwindcss::Ruby is v4.

This PR also adds matrixed (across Tailwind v3 and v4) unit test coverage for the base commands, and integration test coverage for the generated CSS file.

Known issue: this logic will break for users who are using the TAILWINDCSS_INSTALL_DIR feature of tailwindcss-ruby to run a different version of tailwindcss than declared by the gem. This PR hides that version check behind the Commands.tailwindcss_version method, so we can deal with that once someone complains about it.

Closes #419

@pinzonjulian
Copy link

Hey Mike

Unfortunately this didn't work and I believe it's even introduced some regressions. Before I could use Tailwind 4's css-style config but not that isn't working. Something like this has no effect in the output file.

/* app/assets/stylesheets/application.tailwind.css */
@import "tailwindcss";

@theme {
  --color-*: initial;
  --shadow-*: initial;
  --inset-shadow-*: initial;
  --drop-shadow-*: initial;

  --color-special: #fafafa;
}

Before this change it did create an output file with the intended variables (as mentioned before I had to delete and rebuild but it worked). Now it just outputs the whole of Tailwind without any modifications. I even tried commenting out all of the file or adding just the preflight has no effect; I always get the full, default tailwind installation:

/* app/assets/stylesheets/application.tailwind.css */

@import "tailwindcss/preflight" layer(base);

@flavorjones
Copy link
Member Author

Let's take the conversation back to #419 please since I've obviously misunderstood your use case.

@flavorjones flavorjones deleted the flavorjones-support-tailwind-4 branch October 18, 2024 02:05
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.

tailwind.css file is not being updated in Rails 8 with tailwindcss-ruby 4.0.0.alpha27
2 participants