Change The content option in your Tailwind CSS configuration is missing or empty.

[TheCarpetMerchant]

This error is extremely misleading, since there is a content in the theme object of modules.export.
Please update either the warning or the documentation to mention this.

[adamwathan]

Can you explain why you find it misleading? The error says "is missing or empty". Are you seeing the error even if you your content option is present and not empty?

The error points to this page, which is about the top-level content option, not the theme.content option that maps to the CSS content property and isn't often used:

https://tailwindcss.com/docs/content-configuration

[TheCarpetMerchant]

The error does point to the documentation, but even in the documentation (which shows the code, mind you), it doesn't jump to the eye that there is 2 content options. If like me, you did a CTRL+F to find the option mentioned in the error, you wouldn't easily spot that actually there is 2 options named content.
The fact that they have the same name is the crux of the problem here, but simply changing the warning to "The top-level content option in your Tailwind CSS configuration is missing or empty." would be enough to make it clear which one it is.

[AiFxApp]

I seem to misunderstanding the error message as well.
here is my tail.config

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.scss",
    ],
    theme: {
        screens: {
            sm: '480px',
            md: '768px',
            lg: '976px',
            xl: '1440px',
        },
        colors: {
            'blue': '#0317fc',
            'purple': '#8003fc',
            'red': '#fc0303',
            'orange': '#fc5203',
            'green': '#2bcf02',
            'yellow': '#e6c302',
            'darkgray': '#273444',
            'gray': '#8492a6',
            'lightgray': '#d3dce6',
        },
        fontFamily: {
            sans: ['Graphik', 'sans-serif'],
            serif: ['Merriweather', 'serif'],
        },
        extend: {
            spacing: {
                '128': '32rem',
                '144': '36rem',
            },
            borderRadius: {
                '4xl': '2rem',
            }
        }
    },
    variants: {},
    plugins: [
        require('@tailwindcss/custom-forms')
    ],
}

this is what i am getting after npm run dev

✔ Mix
  Compiled successfully in 3.27s


warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

[kbitz]

Getting same error. My config is in the root and called 'tailwind.config.cjs'. First three lines of my config are:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
	content: ['./src/**/*.{html,js,svelte,ts}'],

[zechs-merquise]

The problem was I wasn't saving. Try with Ctrl + S in each change and it will work.

[kbitz]

I had to specify the location of my config, which I've never had to do before. Seems like one of the version upgrades dropped default support for a .cjs version of the config file.

[ekwoka]

My guess is your config file isn’t being picked up at all. It should be called tailwind.config.js and be in your project root for it to be picked up automatically.

Seems to be an issue with the .cjs support

when mine is .cjs I get this content empy warning but it works when its .js (and project isn't module of course)

module.exports = {
  content: ['dist/**/*.{js,html}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
  ],
};

So now using Tailwindcss in an esm project is not possible...

[fastlaner]

To get rid of errors, I had to add full file path like:
content: ['./pages//*.{html,js}','./components//*.{html,js}','P:/py_progs/Django_Stuff/Projects/MySite/scs/templates/registration/signup.html',],

[SantinoMajur]

the warning says the content option in your Tailwind CSS configuration is missing or empty. mine was empty meaning I needed to Configure all the paths to all the files in the content section of the tailwind css config file.

[hirebirhan]

The error is clear and should be easily understood, This is what you have missed

[lojithv]

I also face this issue after upgrading the tailwind version from v2 to v3.
I had to waste more than two hours to find the issue 🥲. There was a content:{} at the bottom. I didn't see that. There should be only one content property. Make sure your config file doesn't have more than one. After removing that it works.

[muriloloffi]

Oh, wow! Thank you very much! You've helped me solve my issue. 🥳

[fknop]

I also have this warning using a Nx monorepo.
I have a tailwind.config.js at the root of the repository without a content key (because it's a base config used as a preset for the different apps).
Each app has its own tailwind.config.js which imports the base config as preset.
Everything works fine in my app, but the warning still shows up.

[darrenmuliawan]

Hey! i have similar setup as yours, using nx monorepo with shared tailwind.config.js at root level and tailwind.config.js at each project level. However, when I build my React app, all the styles are just missing. Have you got this issue?

[danhobbs75]

I have an Nx monorepo, and I have found the same as @fknop. The building of the app itself is absolutely fine, but for reasons I'm afraid I don't understand the Nx build process also builds at the top level of the monorepo. I have added the following code to the top-level tailwing.config.js to remove the warnings, but the end output for the app is unaffected:

import config from './apps/<appname>/tailwind.config';
module.exports = config;

I mention this in case anyone else is using Nx and finds the warnings to be a bit odd. For anyone else, I would suggest that the content entry in the config exports may well be blank and to check that instead! :-)

[sduncan-mbt]

I had this same issue putting my colors :{} in extend: {} solved the issue

[maicWorkGithub]

Another: DO NOT change tailwind.config.js to tainwind.config.ts, even you're working on a Typescript project. 😭

[mybearworld]

This can now be done using npx tailwindcss init --ts

[jaylencode]

Just Ignore the warnings; it still worked for me.

[zoocreative]

I had this issue using Laravel 8 and the latest version of Tailwind (3.2.xx) I had to roll back to version 3.0.24 for it to work as I had a working project that was using this version. It's possible slightly newer versions also work but try changing to an earlier version. I am guessing something is just clashing with the Tailwind version and Mix and causing this to happen.

[avinashkanaujiya]

Mine has it, but still getting the warning

[shouvik000]

same

[aamahi]

Recently I face this issue in my React project.
I solved this issue use next step:

1. after install tailwind in Vite Project in file no tailwind.config.js
2. if content array is empty then add 2 value:

    content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

[ghost]

Its working Just restart your Project. Thats all. igonre it

[shouvik000]

still not working

[srh-cuidate]

Hey there, I'm also getting this warn on a vite project I have and I haven't been able to resolve it... The thing is, I want to have all my .config.js files in a configs directory (configs/tailwind.config .js) and to do so I tried to follow the instructions but there is something I am missing.

1.- Create the tailwind.config.js file using the following guide https://tailwindcss.com/docs/guides/vite, where I execute this command: npx tailwindcss init -p configs/tailwind.config.js and then fill in the content property.
2.- Add the @config directive to my index.css following this guide https://tailwindcss.com/docs/functions-and-directives#config so I ended up with something like this @config "../configs/tailwind .config.js";

The warning only goes away if I move the configuration file to the root directory, which I don't want to do...

[ekwoka]

in postcss when you add the tailwind plugin, tell it there where the config is.

[srh-cuidate]

That's what I was missing! Thank you so much!

[faglyramschie7]

i used nuxt and mine had purge: [], this was causing an issue. I just had to remove it.

[Chayan0099]

I was having the same problem but none of the solutions seemed to work. You can install turbo with tailwind initialized with the command - npx create-turbo@latest -e with-tailwind .

[efthimis-padouvakis]

try installing tailwind v3 so you wont have this problem

1. Tailwind v4 Changed a Lot
   • Tailwind v4 no longer uses a tailwind.config.js or PostCSS by default.
   • It’s now “zero‑config” and uses a completely different on‑demand engine.
   • Many guides (and most boilerplates for Vite + React) are still written for v3, which expects:
   • tailwind.config.js
   • postcss.config.js
   • Manual @tailwind imports in index.css.

So when you followed the usual steps for v3, you were mixing old setup instructions with v4, and Vite couldn’t compile it properly.

⸻

2. Vite + Tailwind v4 Isn’t Fully Documented Yet

Tailwind v4 works out of the box for simple HTML, but when using React/Vite, you often need to:
• Adjust the vite.config.js for Tailwind’s new Just‑in‑Time engine.
• Drop PostCSS config (or adjust if you still want plugins).
• Handle CSS imports differently.

This mismatch caused your installation errors.

[rozsazoltan]

You've strayed a bit from the main topic. In TailwindCSS v4, the tailwind.config.js file is removed, and so is the init process too. Since PostCSS no longer requires a CLI, the core package has been split into three parts:

• tailwindcss - always required
• Two plugins:
  • @tailwindcss/cli - docs: https://tailwindcss.com/docs/installation/tailwind-cli
  • @tailwindcss/postcss - docs: https://tailwindcss.com/docs/installation/using-postcss

Additionally, a new @tailwindcss/vite plugin was released for Vite, so PostCSS is no longer needed when using Vite.

• https://tailwindcss.com/docs/installation/using-vite

Related:

• What's breaking changes from v4?
• Tailwind CSS v4: more packages and new Vite support
• What is the CSS-first configuration

content property

Since there's no longer a config JS-based file in v4, the content property is no longer available.

What's the alternative?
Nothing.

Starting with v4, Tailwind uses automatic source detection.
There is extensive documentation available explaining how this works.

Its behavior can be:

• disabled or
• influenced using @source and @source not.

• https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned
• https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection
• https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path
• https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
• https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths

Related:

• Automatic Source Detection from TailwindCSS v4
• Adding an external source or a package from within node_modules for detection

Safelist support

The safelist feature is also handled via @source inline.

• https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities
• https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants
• https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-with-ranges
• https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes

[rozsazoltan]

TailwindCSS v4

Source: #7695 (reply in thread)

Since there's no longer a config JS-based file in v4, the content property is no longer available.

What's the alternative?
Nothing.

Starting with v4, Tailwind uses automatic source detection.
There is extensive documentation available explaining how this works.

Its behavior can be:

• disabled or
• influenced using @source and @source not.

• https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned
• https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection
• https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path
• https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
• https://tailwindcss.com/docs/detecting-classes-in-source-files#ignoring-specific-paths

Related:

• Automatic Source Detection from TailwindCSS v4
• Adding an external source or a package from within node_modules for detection