Tailwindcss not compiling components or utilites, but base works

[aspectjack]

I am trying to use tailwind for the first time and have followed the installation guide on the website. My input css file has only the three @tailwind expressions for base, utilities and components. When I run "npx tailwindcss -i ./src/input.css -o ./dist/output.css", the output generates as if only @tailwind base was present. Any help on resolving or troubleshooting this issue would be much appreciated.

[paljasma]

I have the same problem.

[paljasma]

Figured it out. The css file is compiled only from the utilities that are used in template files. The config file has to have the correct paths in "content".
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }

[ob2code]

I have the same problem too. Any help?

[ob2code]

Move index.html file to src folder to fix or add the folder path that includes your current HTML files to tailwind.config.js

[SatyaveerPal]

guys I have sort it out just set the right path in tailwind.config.js for content or go here https://tailwindcss.com/docs/content-configuration

[MichalTrubini]

I don't get it. That article says "Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles."

I don't yet have any HTML file with class names. What I do have is HTML file with raw text without any mark up - this I need to add in.

I saw a tutorial on youtube where the guy simply followed the instructions and it generated CSS file with all the available classes that you can use in your mark up. This is what I want to achieve. I don't want Tailwind to scan my components with class names and then generate corresponding CSS for those styles.

[paljasma]

@MichalTrubini That's the way with v3, need to be using the classes in templates. The creators comment on it here: #6256 (comment)

Alternative is to use Tailwind CDN for this:
https://tailwindcss.com/docs/installation/play-cdn

[MichalTrubini]

Thank you @paljasma. At least I know why it is happening. And now I can take further steps. :)

[MichalTrubini]

Same here.

Running tailwindcss -i src/input.css -o public/css/styles.css only gives me css with around 470 lines of normalize code.

I have removed -i src/input.css from the code to see what will happen and still the same CSS file with 470 lines was created. This suggests that

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

is somehow not extracted into my output file. Somehow the paths are not correctly set up I guess?

[SatyaveerPal]

I am facing same problem

[paljasma]

For me the compile does not work when including custom colors. All other colors used in the template (and specified as safelist in the config file) are not compiled, only the custom one gets compiled.

Also have to be very specific with the path, more on content paths I found helpful from here:
https://tailwindcss.com/docs/content-configuration

[paljasma]

bg-black is not compiled into the app.css file.

[alexhulbert]

I had this issue and resolved it by removing spaces in the glob patterns listed in the content parameter of the tailwind config file.

I fixed tailwind after migration to v3 by doing the following:

- content: ["src/**/*.{ts, tsx, js, jsx, htm}"]
+ content: ["src/**/*.{ts,tsx,js,jsx,htm}"]

[khoirulhasin]

if your index.html is in the root folder you can add tailwind.config.js like this:

module.exports = {
  mode: "jit",
  content: [
    "./src/**/*.{html,js}",
    "./index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    
  ]
}

probably, you create a new folder in the root for HTML files for example pages folder, like this:
"./pages/**/*.{html,js}"

[drudd82]

damn bro. this is the money shot. much thanks

[ali-mozaffari]

I have the same issue as mentioned in the topic. Please help me if anyone can solve it.

[Serenit8]

ariants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75. Never configure your variants again.
ACAeronet Login

[Bryanprz]

I solved it by adding another path entry to the content array in tailwind.config.js

Originally I had this (default from the Rails 7 new command: rails new myapp -j esbuild --css tailwind)

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
  ],
}

I added this entry to the content array and it worked: "./app/**/*.{html,js,erb}"

So now the config looks like

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
    './app/**/*.{html,js,erb}'
  ],

That did the trick. I got this answer from https://dev.to/software_writer/how-to-setup-tailwind-3-on-rails-7-2dbo

Hope this helps someone 👍

[VincentX33]

Was getting the same error. Tried all manner of tricks to solve it, later, turns out there was a type
My input.css was:

@tailwind base

@tailwind components

@tailwind utilities

The typo was in not putting the semicolon after each line. This was why a single @tailwind base was generating a css file, while all three were not.

The correct input.css was:

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

[Mihai-github]

Hey guys I'm having the same issue on a TurboRepo Remixjs project but for a normal Remixjs project this issue is not happening, any idea why?

[Masiha-mohammadpoor]

I also had the same problem, but I saw and realized that after configuring the project, vscode exits the auto-save mode, and when I reactivated it, it was fixed.

[valentino-ivanovski]

I'll just comment in case someone else has made the same error as me.

I realized that in my tailwind config, I have

`content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",]`

But my components were .jsx files, instead of .tsx

Renaming the files fixed my problem.