Missing css from tailwindcss/base

[n1ghtmare]

So, I have the following setup:

My css file looks like this (tailwind.css):

/* purgecss start ignore */
@import "tailwindcss/base";
@import "tailwindcss/components";
/* purgecss end ignore */

@import "tailwindcss/utilities";

Then, I have a postcss.config.js file that looks like this:

// Purge css classes that are not being used
const purgecss = require("@fullhuman/postcss-purgecss")({
    // Specify the paths to all of the template files in your project
    content: [
        "./Client/**/*.tsx"
        // etc.
    ],

    // This is the function used to extract class names from your templates
    defaultExtractor: (content) => {
        // Capture as liberally as possible, including things like `h-(screen-1.5)`
        const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
        const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

        return broadMatches.concat(innerMatches);
    }
});

module.exports = {
    plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
        ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
    ]
};

When I run:

postcss wwwroot/css/tailwind.css -o wwwroot/css/tailwind.generated.min.css

I'm getting an output file that for some reason doesn't have:

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

My design on production looks weird. I checked and I see in the output file other base styles such as (for example), but not the one for html:

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

What am I missing here, guys, I'd appreciate the help, I've spent way too much time on this.

Also, I'm not sure other things are not missing, but that's the main thing I noticed.

[n1ghtmare]

Ok, so I figured out the problem! My tailwind.config.js, looked like:

module.exports = {
    purge: ["./Client/**/*.tsx"],

    theme: {
        extend: {
            screens: {
                dark: { raw: "(prefers-color-scheme: dark)" }
                // => @media (prefers-color-scheme: dark) { ... }
            },
            spacing: {
                "72": "18rem",
                "84": "21rem",
                "96": "24rem"
            }
        }
    },
    variants: {
        borderWidth: ["responsive", "last"],
        borderRadius: ["last"]
    },
    plugins: []
};

Since, I'm doing purging outside (because I'm also doing css minification), I should've set purge to false (which I forgot to do apparently), so it now looks like:

module.exports = {
    purge: false,

    theme: {
        extend: {
            screens: {
                dark: { raw: "(prefers-color-scheme: dark)" }
                // => @media (prefers-color-scheme: dark) { ... }
            },
            spacing: {
                "72": "18rem",
                "84": "21rem",
                "96": "24rem"
            }
        }
    },
    variants: {
        borderWidth: ["responsive", "last"],
        borderRadius: ["last"]
    },
    plugins: []
};

This solved my issue, I'm leaving this here since it might help someone else!