Why does my tailwind output file not include the utilities and components

user_17744696 0
Viewed 2193

I've installed tailwind using npm install tailwindcss I then create my src/style.css file and include

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

When I run my build-css command I get a generated output.css file, but the file is only 425 lines long. It looks likes it's missing the components and the utilities. When I link my HTML to the output.css I get the base tailwind css styles applied, but utilities have absolutely no effect. I have followed the docs to the best of my ability as well as several tutorials with the same result every time. No clue what I am I doing wrong, the tuts I have watched show this file to be thousands of lines of code while mine is always 425.

tailwind-css
5 Answers

You need to add a config js file for the tailwind engine, inside the config file use content attribute to define where is your HTML or JS files, the new engine automatically looks inside these files and compiles only the classes that you used.

Check this video for more information:https://youtu.be/mSC6GwizOag?t=22

user_177628870

try this :

npx tailwindcss-cli@latest build ./src/styles.css -o ./public/styles.css

ps: the styles.css in the public folder is the output.css

user_176779310

If you believe you have set everything up properly, check that the structure of the project directory is correct:

project_directory/
   |
   |--- tailwind.config.js
   |
   |--- dist/
   |       | 
   |       |--- output.css 
   |
   |--- src/ 
           |
           |--- input.css
           |
           |--- index.html
           |
           |--- main.js
References
user_150326880

It was my config file, I wasn't point to my source file correctly. Fixed this by coping the documentation's example and file structure. content: ["./src/**/*.{html,js}"], was what I needed to add to the tailwind.config.js

user_177446960

In my case, I had spaces in the file extensions that cause my problem

   module.exports = {
     content: ['./app/**/*.{js,ts,jsx,tsx}'],
     //wrong content: ['./app/**/*.{js, ts, jsx, tsx}'],
      theme: {
        extend: {},
      },
      plugins: [],
    };
user_6499610
Related