Here is my HTML link https://play.tailwindcss.com/fbB4GCL0ht
warn - No utility classes were detected in your source files. If this is unexpected, double-check the
contentoption in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration Done in 320ms.
This is showing my Visual Studio Code Terminal. What should I do? I have also added base components and utilities.
This error is due to Tailwind not finding any classes to scan in what it 'thinks' is your HTML code directories.
This section in your tailwind.config.js file determines which files are scanned to be processed by Tailwind CSS:
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
This corrected the issue for me.
Official documentation: Content Configuration
mdx-components.tsx file for customizing built-in components, make sure to include this file in tailwind.config.js under content like './mdx-components.tsx', –
Groundhog I was facing the same problem. After some tests, I found a solution, but I don't know the right solution or why this is occurring, so if anyone has a clue, let us know.
content: [
'./pages/**/*.tsx',
'./components/**/*.tsx',
],
or
content: [
'./pages/**/*.jsx',
'./components/**/*.jsx',
],
Tailwind is not recognizing the options between {}, so I just specifying what type I'm working on, .tsx or .jsx. And I was leading to a wrong path, so check this, as well.
.../*{js, jsx, ts, tsx} but it should have been .../*.{js,jsx,ts,tsx}. –
Winfield Although I added content in tailwind.config, it was still giving warnings.
I was running command to build the output:
npx tailwindcss -i ./input.css -o ./build/output.css
added -cli to the command and it worked for me:
npx tailwindcss-cli -i ./input.css -o ./build/output.css
I had this issue too, but I may have solved it. Originally content in my tailwind.config.js file looked like this:
content: ["./src/**/*.{html,js}"]
I noticed that my App.js file was actually App.jsx so I just inserted single letter 'x' into that line:
content: ["./src/**/*.{html,jsx}"]
It seems to have worked.
Your tailwind.config.js file can’t find your index.html file.
In the Tailwind CSS configuration file add your file path into content array './index.html',
You have to define your file path into content like below:
module.exports = {
content: ["./src/**/*.{html,js}",
'*.{html,js}'], // Like this
theme: {
extend: {},
},
plugins: [],
}
By the way, if you have different file extensions like .ts, .jsx, etc., you have to define the file extension in content: ['./*.{html,js,ts,jsx}']
Don't use the curly braces; instead, specify the following.
module.exports = {
content: [
'./src/**/*.html',
'./src/**/*.js',
'./public/**/*.html',
'./public/**/*.js'
],
theme: {
extend: {},
},
plugins: [],
}
I think I've found the answer to the problem of Tailwind not building classes.
Besides the config of tailwind.config content sources, what really matters is:
From which folder you start your app with ng serve
For example, my tailwind.config file is:
module.exports = {
content: ["app.component.html", "product/product.component.html", "home/home.component.html"]
theme: {
extend: {},
},
plugins: [],
}
for Tailwind to find the classes in those three templates I have to start Angular from /src/app/ folder with ng serve.
If I start Angular from the /src/ folder then Tailwind will not find any classes.
If you use Vite then configure in file tailwind.config.js:
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
Or you use Yarn, Npm, etc... then configure in file tailwind.config.js:
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
I was facing the same problem, the solution is to make sure your content configuration is correct. refer
tailwind.config.js: Make sure the content source is pointing to your HTML files that are using tailwind. refermodule.exports = {
content: [
'./components/**/*.{html,js}',
'./pages/**/*.{html,js}',
'./index.html',
],
theme: {
extend: {}
},
plugins: []
}
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
** Ensure there are no warning messages regarding invalid file paths.
Like others said it depends if you are working with JS, TypeScript, or even HTML. In each case, you need to say the config to which files it will apply.
This is my config and I work with TypeScript:
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: ["./src/components/**/*.tsx", "./pages/**/*.tsx"],
theme: {
extend: {},
},
variants: {},
plugins: [require("tailwindcss"), require("precss"), require("autoprefixer")],
};
In addition to the other solutions, this can happen if you've changed the prefix value in your configuration file.
You will also see this warning if you haven't actually set any class statements.
So, if you're starting a new project, and you're 100% sure your config file is correct, make sure you have at least one class statement in one of your files.
For example
<div class="w-full">Hello</div>
This depends on the file you are working on. For example, if you're working on .js and .html file then you need to specify it in your tailwind.config.js file like this:
content: ["./src/**/*.{html,js}"]
If you're also working on .jsx file, then you only have to add it to your configuration file:
content: ["./src/**/*.{html,js,jsx}]
Just add this to into global.css
@tailwind variants;
I had a similar problem where some tailwind styles were working and other ones were not. After trying everything on this thread I got the impression that it could be something to do with adding the wrong object in the tailwind config. I remembered that I had added some bespoke fontsizes recently and had added this directly in the theme object. I moved it to the extension object and it worked immediately. For example:
Not working:
Working:
Make sure that in content, the string doesn't contain spaces: {.js,.jsx} instead of {.js, .jsx}.
Originally I used it well, but when i builded a new project i found it was not working anymore. I have tried many solutions and tried to check what I did wrong, but in the end, i found it just a matter of path. so i mean, you need to check the path, "./pages/......"or"./src/pages/......."
I got the same error. But when I started adding tailwind classes to the components and restarted the server, it's gone.
I think it might due to no class names found in any of the files it scanned.
I had to delete my package-lock.json and recreate with npm install.
I had tried everything up and to that point but this worked.
Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often public/index.html), so if you are adding Tailwind classes to that file make sure it’s included in your configuration as well:
Don't forget your HTML entry point if applicable
tailwind.config.js
content: [
'./public/index.html',
'./src/**/*.{html,js}',
],
// ...
}
It worked when I removed the dot before the curly braces like
content: ["./src/**/*{js, jsx,}"]
or add them individually like
content: ["./src/**/*{.js, .jsx,}"]
I don't really understand why but I get an error when I configure it like
content: ["./src/**/*.{js, jsx,}"]
warn appear when using this content: ["./src/**/*{.js, .jsx,}"]? –
Nationalize I'm using Vite inside a monorepo (turborepo). Prefixing the content glob with __dirname fixed it for me:
{
content: [
__dirname + "./index.html",
__dirname + "/src/**/*{js,ts,jsx,tsx}"
]
}
After you read the Tailwind CSS installation carefully and did all the steps, make sure, when you run the project (npm run or ng serve or anything else) be at the same directory that package.json is.
Just in case someone is playing around with only HTML and Tailwind CSS (no JavaScript), as I was :), you need a server running to serve the Tailwind CSS styles or adjust the path to where the CSS file is.
If you're using Visual Studio Code you can use for example the extension Live Server to start a server to host your static HTML files.
If you want to run your HTML file without a server, then make sure to adjust the link to the absolute path of your CSS file, e.g.: <link href="/home/john/project/dist/output.css" rel="stylesheet">
As mentioned above, when declaring multiple file types in the tailwind.config.js => content make sure to don't have any space between them! And always double-check your paths.
Happy styling with Tailwind CSS!
The path may have been changed in your project. Check your path and configure accordingly. E.g., if you have moved your pages & components to your src folder, add the following to your Tailwind config file.
content: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
I had the same problem. In my case, I had spaces before file extensions in tailwind.config.js.
Wrong version:
content: [
"./assets/**/*.{vue, js, ts, jsx, tsx}",
"./templates/**/*.{html, twig}"
],
Correct version:
content: [
"./assets/**/*.{vue,js,ts,jsx,tsx}",
"./templates/**/*.{html,twig}"
],
It basically looks for your component files, so you have to configure the path that way.
Suppose you just started a react project, added tailwind, and you want to check. in that case you can add the following to your, tailwind.config.js file. This will locate the App.jsx file in your src directory of the project.
content: [
'./src/.{html,jsx}',
],
On another case, if you have a components directory inside of which you different directories for different components you can add the following to your tailwind.config.js file.
content: [
'./src/**/*.{html,jsx}',
]
Just Import TailwindCSS into your pages/_app.js file:
import '../styles/globals.css'
import 'tailwindcss/tailwind.css';
function MyApp`enter code here`({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
Make sure your Tailwind config file doesn't contain duplicated properties. In my case, the content property had been repeated twice. After removing one of them it worked as supposed to.
Ran into this issue when doing an upgrade to 3.1.x from 2.2 and did not complete all the upgrade steps.
Specifically, I added the content entry but did not remove the purge entry
module.exports = {
purge: [],
content: ['./src/**/*.{js,jsx,ts,tsx}']
After I removed the purge line, the util classes where included.
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}']
I had the same problem, check your path to your templates in tailwind.config.js.
Path might begin with .. instead of .:
content: [
'../src/app/app.component.html'
]
instead of
content: [
'./src/app/app.component.html'
]
This was my problem.
This is what worked in my case. I had to use path in the tailwind.config.js file to make it work.
const { join } = require('path');
module.exports = {
content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx}')],
theme: {
extend: {},
},
plugins: [],
};
For anyone that is using Tailwind with Next.js and Tailwind CSS. Add this to your content value:
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
Attention!
The warning will still there even if you corrected the content path,
You need to add minimum one Tailwind CSS class to one of the paths you mentioned in content, just use a tailwind css in your project, and the warning will disappear. :)
I have tried a few things trying to get the styles to be applied with Tailwind CSS. I did eventually add the CDN script tag to my index which basically made the class styles pull through to the frontend.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// CDN added which made everything work..is this a good approach?
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
I have also got the same error. Look at this configuration file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./Components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Make sure if you create a folder of Components in your root folder, it should be Components in your taiwind.config.js file.
Just btw, when your content is bloated with a bunch of different file paths that have all the exact same pattern except for 1 folder like example:
content: [
'./src/app/**/*.{js,ts,jsx,tsx}',
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx',
'./src/hooks/**/*.{js,ts,jsx,tsx}',
],
You can put the folder names in one like this:
content: ['./src/(app|pages|components|hooks)/**/*.{js,ts,jsx,tsx}'],
Check the files structure on the left side and run:
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch
The smart Tailwind CSS will scan the folder for file and it will be successful!
For anyone still facing this issue, you can just past the below snippet into your tailwind.confg.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: ['./**/*.{html,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
That's because your Path directory in your tailwind.config.js is Incorrect.
for example, if you have an SRC folder, it should be like this :
content: [
'./src/app/**/*.{html,js,jsx,ts,tsx}', // Include all JavaScript/TypeScript files in the pages directory
'./src/components/**/*.{html,js,jsx,ts,tsx}', // Include all JavaScript/TypeScript files in the components directory
],
This error is due to Tailwind not finding any classes to scan in what it 'thinks'. For, e.g: if you're running public/index.html file in a browser then follow the below steps.
We need to create tailwind.config.js file. This file contains tailwind configuration like on which file needs to apply css or theme etc.
To create a file hit a command on your terminal
npx tailwindcss init
This command will create tailwind.config.js in your root folder. Now, we need to modify the configuration. We will tell tailwind which files need to apply tailwind css and theme etc. In our case we're running public/index.html. So configuration like as below
module.exports = {
content: [
"./src/**/*.{html,js}",
"./public/**/*.{html,js}"
],
theme: {
extend: {},
},
plugins: [],
}
Here, I want to compile files that are present in a public folder and src folder. So I've added both of them.
Try now. Good Luck.!
I was using Angular 11 with Tailwind ^3.4.4 and was facing an abrupt issue where the Tailwind classes were partially loaded during serve. For example, class flex would work but not max-w-full.
Tailwind was not recognizing the HTML changes that the new classes were added to any element and whenever I change any .scss file or tailwind.config.js file the changes would reflect. To overcome this, you need to perform the following:
content: ["./src/**/*.{html,ts,js}"]
Paths are relative to your project root, not your tailwind.config.js file, so if your tailwind.config.js file is in a custom location, you should still write your paths relative to the root of your project.
Also, if you have your tailwind.config.js file situated in some nested directory, the path will change accordingly. Mine was at the root of the project.
index.html is served as the main HTML, so you also need to add this path in your content property in order for the Tailwind class checker to work properly and include the classes at runtime (after doing this, I no longer face the issue of class being removed on consecutive saves. Also, the classes were applied properly without saving .scss or .config file. So, the content value now becomes:content: ["./src/**/*.{html,ts,js}", "./index.html"],
important flag in our config. Final config looks like:/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,ts,js}", "./index.html"], // <-------
theme: {},
plugins: [],
important: true // <-------
}
Pro tip:
Don't forget to check the dist folder's generated style.css when you create your production build. Look for Tailwind classes are included because it's better to be safe than sorry!
I hope I could save someone's hours of headache... ;)
© 2022 - 2024 — McMap. All rights reserved.
tailwind.config.jsfile in your project? Without knowing what you've done and what file(s) you have, there's no way to diagnose the problem – Jobi@tailwind base;@tailwind components;and@tailwind utilities;in your main CSS file – Jobi