jonathan gonzalez
jonathan gonzalez

Reputation: 49

Why doesn't Tailwind CSS generate all of the utility classes by default?

I have seen in some tutorials that you can initially generate all of the CSS to use it for development and afterward have Tailwind only generate the CSS that you are using in your code. I would like to generate all of the CSS at first, and when I finish the project, clean it up and optimize the CSS with a command.

tailwind.config.js

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

Script in package.json

     "build:css": "npx tailwindcss -i ./src/index.css -o ./src/styles.css",

index.css

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

This generates only 500 lines of CSS in style.css because I'm using only using a background in the HTML so far.

Upvotes: 1

Views: 1651

Answers (1)

Sanan Ali
Sanan Ali

Reputation: 3444

I think you have been following the old tutorials on youtube. In the past, tailwind generate CSS output file directly but you had the option to use JIT (Just in Time) mode. Now, in tailwindcss 3.0+ JIT is a default mode. Please read more about JIT in 3.0 Here

Upvotes: 3

Related Questions