with-tailwind example duplicated css

[oscarsala]

this example causes tailwind to be imported twice duplicating classes, and base selectors styles causing a lot of issues with specificity, has anyone been able to integrate it better?

[oscarsala]

if anyone is experiencing the same issue you can solve it by consuming the UI package directly from the source as stated in the example readme, in my particular case I only cared to consume UI so I added that to the content packages ../../packages/ui/**/*.{js,ts,jsx,tsx}

Another option is to consume packages/ui directly from the source without building. If using this option, you will need to update your tailwind.config.js to be aware of your package locations, so it can find all usages of the tailwindcss class names.

For example, in tailwind.config.js:

  content: [
    // app content
    `src/**/*.{js,ts,jsx,tsx}`,
    // include packages if not transpiling
    "../../packages/**/*.{js,ts,jsx,tsx}",
  ],

I'm glad I could fix my problems but I don't think the example should come by default with double tailwind imports, it's adding unnecessary CSS and causes a lot of issues with styles being overwritten all over your app.

[anthonyshew]

We've updated the with-tailwind example since this discussion's origin! Check the examples folder to learn more.

[sakib412]

But it still duplicates the *, ::before, ::after selector.