with-tailwindcss example double include of globals breaks styling

[kriswuollett]

What version of Turborepo are you using?

1.4.3

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Linux

Describe the Bug

The shared ui component includes tailwindcss globals overrides the sample app's globals.css, when both are included in the app. This can cause issues like masking a button's background color (also breaks the search bar layout in the Card layout with sidebar example). Note the missing teal "Send money" button that should be next to "Add money" on the right hand side, and the order of css imports is user agent, global, global, styles:

Expected Behavior

The examples should show proper reuse of tailwind/css in a shared UI package.

I'm not sure what the best solution is, but perhaps in the short term it includes:

• not including tailwindcss configuration in ui and assuming those globals are included
• scanning the shared component library as described in Tailwind's third-party library / monorepo guide

Longer term perhaps:

• app should demonstrate extending the theme from ui, e.g., more theme colors

To Reproduce

Not sure at the moment, because merely adding something like the following to the examples index.tsx below the current button seems to work due to the differing import order:

        <div className="mx-auto mt-5 max-w-xl sm:flex sm:justify-center md:mt-8">
          <button className="text-white bg-gray-600">HI</button>
        </div>

Note order of CSS imports is: user agent, globals, styles, globals.

[linkb15]

Tailwind Prefix Config

How about prefix the classname so it does not conflicting using the tailwind configuration prefix option?

[tknickman]

@kriswuollett we ended up using the prefix option for the ui lib in our tailwind example to avoid this issue. The example is up to date now and should fix this!

[kdb13]

@kriswuollett we ended up using the prefix option for the ui lib in our tailwind example to avoid this issue. The example is up to date now and should fix this!

Won't prefixing cause having duplicate classes in the final CSS bundle for the NextJS app?

Suppose, we are using the px-4 class in the ui package as well as the web NextJS app, then when the app is built, it'll include two classes:

• px-4 from the NextJS
• ui-px-4 from the UI package