search

Roman86 / tailwindcss-scoped-preflight

To avoid style conflicts (CSS collisions/interference side effects) when using Tailwind CSS with other UI libraries like Antd, Vuetify etc.
MIT License
87 stars 2 forks source link

How to make this work within vite-react app? #37

Open berkerdemirer opened 1 month ago

berkerdemirer commented 1 month ago

Hey,

I am trying to ship a library and I don't want my library's preflight to clash with consumer app's styles. That's why I wanted to isolate everything.

I added the tw config as referenced in the doc:

plugins: [
    require('tailwindcss-animate'),
    scopedPreflightStyles({
      isolationStrategy: isolateInsideOfContainer('.twc'),
    }),
  ],

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/devicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webshop search</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/demo.tsx"></script>
  </body>
</html>

But when I compile my CSS, I only see the comments for the preflight classes. Classes themselves are missing. Is there something else that I should be doing?

image
berkerdemirer commented 1 month ago

I had to add that classname to the wrapper div in one of my jsx.

berkerdemirer commented 1 month ago

Actually, it did not work as expected.. reopening for a discussion

Roman86 commented 1 month ago

hi @berkerdemirer ! Did you get TailwindCSS working without a plugin? I guess you're missing the content: ['**/*.html'], param in your config. In this case the CSS is also empty (can't find the tailwind classes)

Roman86 commented 1 month ago

another thing - Tailwind is HTML processor that is crawling your HTML files (kind of) - it generates only CSS used in your HTML. Probably since our preflight styles are customized (need that extra selector) they are filtered out if not found in HTML. I don't see it in your HTML. If you use it - you will see the CSS in there

Roman86 commented 1 month ago

another suggestion - if you ship tailwind-styles components - you just make tailwind a peer dependency (host app should have its own config with its own opinion/policy about the preflight styles), + some partial config for the host to extend with (if any custom theme stuff needed, like own colors/animations etc). So I wouldn't use this plugin on the library side at all

berkerdemirer commented 1 month ago

Hi, Roman,

The thing is, once I ship this package, it should be framework and setup-agnostic. It has to work when there is no tailwind configured in the target app. That's why I am compiling the CSS to import it later when I use this package.

Regarding adding HTML to the content array, you were right that I was missing it. But where exactly I should add the wrapper class inside the HTML? To body tag or?

Roman86 commented 1 month ago

Hi! You can put your wrapper anywhere up your DOM tree - body is fine I guess. You may put a requirement to add your specified class to your library consumer DOM root. But to have that complete CSS compiled you need that build-time HTML page with all your components

Roman86 commented 3 weeks ago

@berkerdemirer please check my suggestions. What do you think?