Re-enable tailwind preflight?

[earnest imp]

I'm building a component library with tailwind for styling - all components rely on the preflight for proper rendering. I have a documentation website setup with starlight (following https://starlight.astro.build/guides/css-and-tailwind/#tailwind-css), and am using react-live (https://www.npmjs.com/package/react-live) to preview the components with a LiveEditor and LivePreview. I've noticed that some components have discrepancies when rendered in starlight vs. a regular react application - eg. a <button> has the user agent background applied in starlight, but not elsewhere.

Is there a way for me to re-enable the tailwind preflight for our rendered components? I've tried importing our stylesheet where the components are rendered, but the user agent styles still take precedence.

[tired ledge]

Does the css file you imported have the @tailwind base directive?

[crimson mantle]

It might be possible to apply preflight styles to a specific class name maybe? 🤔 That way, if you have that class on the preview pane, the components could still get those styles without them applying globally and messing up Starlight’s styles.

(For context @tired ledge, we provide a Tailwind plugin for Starlight, but needed to disable a lot of the default “preflight” (reset) styles as they conflict with Starlight’s expectations)

[tired ledge]

Ah thank you that’s good to know!

I definitely need to dive into starlight more 😅

[crimson mantle]

Aha, figured out a way to do what I suggested above.

Based on this SO answer: https://stackoverflow.com/a/79016546

So basic idea is:

• Don’t use Starlight‘s plugin.
• Instead, scope Tailwind entirely to some specific class. This could be .preview-pane if it’s only needed in previews or .with-tw if you have a range of containers within which you want to enable Tailwind.
• By scoping it, you don’t need to worry about disabling Preflight, because it’s not going to interfere with Starlight’s styles except in places you explicitly want.

How to do that in a Starlight project:

1. Update src/tailwind.css to wrap the Tailwind directives with your chosen class name e.g.:

.preview-pane { 
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

2. Remove the Starlight plugin from tailwind.config.mjs.
3. Install the CSS nesting plugin: npm i postcss-nested
4. Add a postcss.config.mjs file to tell PostCSS to use the nesting plugin:

export default {
  plugins: {
    'postcss-nested': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Here’s a demo of this set-up: https://stackblitz.com/edit/github-xnnrud?file=src%2Ftailwind.css,tailwind.config.mjs,postcss.config.mjs,src%2Fcontent%2Fdocs%2Findex.mdx

[earnest imp]

Ah, I was just reading through that stack overflow post! Thanks for the help, I'll try it out in my project tomorrow 🙂

[crimson mantle]

Hopefully this approach works for you 🤞 It does have the drawback of making TW unavailable in other places, but I can imagine that if the primary use case is just the styles required by the component previews, this approach should work pretty well (perhaps even better than the Starlight plugin approach),

[tired ledge]

Out of curiosity why the postcss-nested not the tailwindcss/nested?

[crimson mantle]

The SO post said they found the Tailwind one didn’t work so I didn’t try it. But no idea why it would/wouldn’t.

[tired ledge]

Also saw this in a recent starlight project, with globals.css only containing the 3 tailwind* directives

It seems to apply everything correctly, trying to understand the differences in why that wouldn’t work here

starlight({
    customCss: ["./src/styles/globals.css"],
}),

[crimson mantle]

They were almost certainly using our Tailwind plugin in tailwind.config.mjs

[tired ledge]

Tailwind, not trailing.

Damn phone

[tired ledge]

Ah yes that is indeed present

[crimson mantle]

Basically the issue is:

• If you apply Tailwind without Starlight’s plugin, it applies a bunch of quite aggressive style resets that mess up Starlight’s styling (because it’s not expecting lots of browser defaults to be reset)
• If you apply Tailwind with Starlight’s plugin, we disable some of those more aggressive resets, Starlight’s styles work, and you can apply Tailwind classes to stuff. BUT if you have some stuff that depended on those styles like above, this can cause issues.

So yeah depends a lot why you’re reaching for Tailwind/what you’re using it for.