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

Tailwind CSS support #73

Open
Ibadichan opened this issue Dec 16, 2024 · 0 comments
Open

Tailwind CSS support #73

Ibadichan opened this issue Dec 16, 2024 · 0 comments

Comments

@Ibadichan
Copy link
Contributor

Hi! Thanks for the library.

We are using used-styles with Tailwind CSS in our project, and I noticed an issue with the critical CSS generation when classes contain unescaped characters, such as : or []. Examples of such classes include:

  • .md:mb-0
  • .text-[#000]

Tailwind CSS automatically escapes these classes during the CSS build process, transforming them into:

  • .md\:mb-0
  • .text-\[#000\]

However, when calling getCriticalStyles, your library cannot locate these classes correctly, as it searches for the unescaped versions (e.g., md:mb-0), while the build files contain their escaped counterparts (e.g., md\:mb-0).


Steps to Reproduce

  1. Clone the repository from used-styles examples and run any example.
  2. Simulate a Tailwind-like scenario by adding the class md:mb-0 to a React component.
  3. Define the corresponding CSS rule in the main CSS file, e.g., .md\:mb-0 { margin-bottom: 0; }.
  4. Observe the result: the class md:mb-0 is not included in the critical styles.

Suggested Solution

Would it be possible to add support for Tailwind CSS in your library by escaping class names when searching them in the build files? This should resolve the issue.

Thanks.

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

No branches or pull requests

1 participant