@config directive occasionally included in the built file

[PabloWestphalen]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

None / Tailwind's default through the tailwindcss command

What version of Node.js are you using?

v19.4.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

Can't reproduce. Happens occasionally.

Describe your issue

Sometimes the @config directive declared in the source CSS file is included in the built file. Any idea why?

[thecrypticace]

Can you provide the content of your CSS file and the exact command you're using to run the CLI? Even if it only happens occasionally a reproduction of some kind is likely necessary.

[PabloWestphalen]

Sure!

src.css

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

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const colors = require("tailwindcss/colors");

module.exports = {
    content: [
        "v2/SomeFolder/**/*.{html,js,php}",
        "v2/*.php",
        "v2/src/**/*.{ts,tsx}",
        "../../plugins/some-plugin/src/**/*.{js,jsx,ts,tsx}",
        "../../plugins/some-plugin/components/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {
            screens: {
                sm: "640px",
                md: "768px",
                lg: "1024px",
                xl: "1280px",
                "2xl": "1440px",
            },
            colors: {
                "wl-white": "#FFFFFF",
                "wl-neutral-50": "#FAFAFA",
                "wl-neutral-100": "#EEEEEE",
                "wl-neutral-200": "#E5E5E5",
                "wl-neutral-400": "#888888",
                "wl-neutral-500": "#727272",
                "wl-neutral-600": "#525252",
                "wl-neutral-950": "#0A0A0A",
                "wl-action-link": "#1789F4",
                "wl-action-link-hover": "#1763AA",
                "wl-action-cta": "#FF4F00",
                "wl-action-cta-hover": "#CD4001",
                "wl-comp-01": "#FFD9AA",
                "wl-alert-error": "#DC2626",
                "wl-alert-success": "#15803D",
                "my-brand": {
                    lightest: colors.sky["300"],
                    lighter: colors.sky["400"],
                    light: colors.sky["500"],
                    DEFAULT: colors.sky["600"],
                    dark: colors.sky["700"],
                    darker: colors.sky["800"],
                    darkest: colors.sky["950"],
                },
                "my-base": {
                    white: colors.white,
                    lightest: colors.neutral["50"], 
                    lighter: colors.neutral["100"], 
                    light: colors.neutral["200"], 
                    DEFAULT: colors.neutral["400"],
                    dark: colors.neutral["600"],
                    darker: colors.neutral["800"],
                    darkest: colors.neutral["950"],
                    black: colors.black
                },
                "brands": {
                    whatsapp: '#02B875',
                    instagram: '#E4405F',
                    twitter: '#1DA1F2' 
                }
            },
            fontFamily: {
                "im-sans": ["'Inter'", "sans-serif"],
                "im-serif": ["'Source Serif 4'", "serif"]
            },
            maxWidth: {
                "8xl": "82rem"
            }
        },
    },
    plugins: [],
};

npm script in package.json

"tailwind": "tailwindcss -i ./v2/css/src.css -o ./v2/css/style.css --watch",

Then what will happen is that occasioanlly the style.css will be built like

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

/*
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
*/
[...]

[thecrypticace]

This should be fixed by #12327, and will be available in the next release.

You can try it by using our insiders build — it may take about 15min to build & publish:

npm install tailwindcss@insiders