multi config via @config does not include preflight CSS and CSS Variable Defaults

[Onatcer]

So I'm not really sure if this is a bug, missing documentation, if I just overlooked something or if this is expected behavior but I tried the multi-config feature and it did not include preflight CSS and CSS Variable Default Values like it would when I create a project normally. I was able to reproduce it in a minimal project with tailwind CLI.

Thats the style.css

@config "../tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;

and here is the tailwind.admin.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

I didn't really find any documentation on the multi-config options and I also didn't find a way to manually include the options. I would have expected the multi-config files to behave the same as the regular files.

Removing the @config directive from the CSS file and renaming tailwind.admin.config.js to tailwind.config.js gives me the expected result with preflight CSS and CSS Variable Defaults.

Did anyone else run into this issue?

[felixfrey]

I have the same problem!

[adamwathan]

Hey! Do you mind creating a reproduction?

[Onatcer]

@adamwathan I pushed a minimal version of this here: https://github.com/Onatcer/tailwind-multi-config-example

The PostCSS files are in /src

• input.css uses the tailwind.config.js (no @config is provided)
• admin.css uses tailwind.admin.config.js

I committed the build CSS in dist

• output.css originates from `input.css
• admin-output.css originates from admin.css

They can also be build using npm run build

The tailwind config files are the same, but the outputs in dist differ.

[Onatcer]

Short update: It looks like this is also affecting the @tailwindcss/forms plugin for me, pushed the example in a separate branch. https://github.com/Onatcer/tailwind-multi-config-example/tree/forms

I can also open an issue on the forms repository but I would guess those two are related.

[felixfrey]

Hi, @Onatcer & @adamwathan

I found a solution to this issue, you have to include the @config line at the end of your CSS file, instead of the beginning. This is contrary to the example given in the docs, where the @config line is the first line of the CSS file. (https://tailwindcss.com/docs/functions-and-directives#config). With this change, the preflight is included in the output!

[Onatcer]

@felixfrey thank you! I just tested it and it works for me in the test repository as well as in the project where I encountered the problem originally.

[thecrypticace]

The config at-rule @config "../tailwind.admin.config.js" needs a semicolon at the end to be correct CSS.

It appears that PostCSS parses:

@config "../tailwind.admin.config.js"
@tailwind base;

as a single at-rule which is why preflight and defaults are missing. We could probably tweak the parsing of @config to error on this though.

[thecrypticace]

Following up, newlines are valid in an at-rule preamble so this isn't a parsing bug in PostCSS. We're holding off on tweaking the parsing for @config for now at least. This likely came from our blogpost which accidentally omitted it. Sorry about that! The post has been updated.

[Onatcer]

@thecrypticace well I feel very stupid now. Thank you for the clarification!

[thecrypticace]

haha it's totally okay! It tripped me up too. I was super surprised it wasn't a parse error in the first place.