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.

[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?

[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

[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}",
  ],