[v4] CSS Import and Nesting

[dvzrd]

Hello, thank you for releasing v4 beta, I really like the idea of working in css as it makes a lot of things more simpler for reusability than js plugins. Hope you can answer some questions I have related to importing and nesting css

Importing and nesting wasn't a problem in v3 when using tailwindcss/nesting with postcss-preset-env and postcss-nesting plugins. Here's the config I had:

const config = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    "postcss-preset-env": {
      stage: 2,
      minimumVendorImplementations: 2,
      features: { "nesting-rules": false },
    },
  },
};

In v4, I replaced the above with just the @tailwindcss/postcss plugin but my nested styles for some primitive component styles that I was assigning to the components layer were not processed into usable css.

I have a component library with fragmented stylesheets for reusable component styles, which I import into a single components.css file. I then import this and other style collections into a main.css tailwind stylesheet, using the layer function so they can be injected into the correct tailwind layer. Again, not a problem in v3 but for v4 it doesn't work as expected.

So, I have a few questions about import and nesting in v4:

• Is it possible to import two separate theme stylesheets and merge them into a single theme layer/reference - both stylesheets have a @theme layer but I'm unable to merge them together into a single theme when importing them
• Is nesting supposed to work without config now since lightningcss is supposed to handle nested css rule? How does this work with imported stylesheets that don't have tailwind layers inside them, instead the import handles assigning the file to a specific layer.
• Does your app need a main stylesheet or can it build from an external stylesheet, imported into the app's layout as a workspace dependency. Do I have to import it into a stylesheet with a tailwind import instead?

Hoping to get some guidance on this if someone already solved a similar issue with v4 or if the feature is still in development.

I don't have a problem with v4 when using a single stylesheet inside an app but when I have multiple packages with different styles and I want to merge them together with layer imports, things don't exactly work out. The themes aren't injected and the nested styles aren't processed into css.

Thanks for your work on this!

[wongjn]

Is it possible to import two separate theme stylesheets and merge them into a single theme layer/reference - both stylesheets have a @theme layer but I'm unable to merge them together into a single theme when importing them

Yes, this should be possible:

/* a.css */
@theme {
  --color-foo: red;
}

/* b.css */
@theme {
  --color-bar: blue;
}

/* input.css */
@import "tailwindcss";
@import "./a.css";
@import "./b.css";

Would compile to something like:

@layer theme, base, components, utilities;
@layer theme {
  :root {
    …
    --color-foo: red;
    --color-bar: blue;
  }
}

Is nesting supposed to work without config now since lightningcss is supposed to handle nested css rule? How does this work with imported stylesheets that don't have tailwind layers inside them, instead the import handles assigning the file to a specific layer.

Nesting works in the sense that Tailwind now uses native CSS nesting.

Does your app need a main stylesheet or can it build from an external stylesheet, imported into the app's layout as a workspace dependency.

Tailwind should be able to build from an external stylesheet, imported into the app's layout as a workspace dependency. In v4, the CSS file becomes the defacto configuration file.

Do I have to import it into a stylesheet with a tailwind import instead?

You shouldn't need to, if the stylesheet itself has @import "tailwindcss"; in it and the consumer project has Tailwind v4 installed.

[dvzrd]

Thanks @wongjn, I managed to merge the themes. I think the issue was using theme layer in the import, didn't need to include that like with the other layer imports because the theme files already have @theme so it just works as a regular import.

The only issue I'm having is with some css nesting rules not being compiled. I don't think it's specifically nesting related because some nested rules are working. It's more an issue with some modern css rules that're probably not supported by the current lightningcss presets.

The primary issue is with nesting css classes like this:

.btn {
  &-primary {
    ...
  }
}

Seems like the compiler can't read the sass style syntax and only picks up on style rules when defined like this:

.btn {
  &:where(.btn-primary) {
    ...
  }
}

Is there a way to configure the preset env for tailwind's lightningcss compiler using the postcss plugin options? Is there plans for a future release to be able to override the compiler options to enable modern css presets?

Thanks again, for answering my questions. Hope you have a happy new year!

[wongjn]

Is there a way to configure the preset env for tailwind's lightningcss compiler using the postcss plugin options?

No.

Is there plans for a future release to be able to override the compiler options to enable modern css presets?

I'd say that using CSS-native nesting is already pretty modern CSS. The misconception here is that CSS-native nesting does not behave exactly the same as Sass-style nesting.

[dvzrd]

Thanks @wongjn, I appreciate your help! The problem is basically syntax sugar so it's not a big deal.