I’m new to Tailwind CSS (first project) and I feel like I’m missing a basic step in getting my Tailwind to work properly.
I have my Project Folder Structure:
Lesson01
- build (folder)
css (folder)
style.css
index.html - src
input.css
tailwind.config.js
I’m trying to make an emerald colored div box with some different classes applied for shadows and making the object a full circle. Nothing too crazy yet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="min-h-screen grid place-content-center">
<div class="bg-emerald-500 w-52 h-52 rounded-full shadow-2xl"></div>
</body>
</html>
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./build/*.html'],
theme: {
extend: {},
},
plugins: [],
}
style.css is the output of the generated base Tailwind css file.
input.css contains the initial layers for Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
I’m new to Tailwind but I would love to learn and apply it for my home projects that I’m experimenting with. Any advice would be much appreciated!
I tried running
npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch
in the terminal to update the style.css
file using the input.css
file.
However, I didn’t see any expected results. I did get hit with this:
Rebuilding...
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Done in 58ms.
So the issues I’m hitting are for sure due to my noviceness with Tailwind haha.
Any help would be appreciated and I’m new to posting on StackOverflow as well!
2
Answers
Tailwind is not using the configuration file at
src/tailwind.config.js
that you might be expecting. By default, Tailwind looks for a configuration file in the root of the project. For solutions, you could:src/tailwind.config.js
file to the root of your project.src/tailwind.config.js
via the@config
directive in yoursrc/input.css
file:Also, you state your
index.html
is inbuild/css/index.html
so you’d need to add this to yourcontent
:And fix the path to the CSS file in
index.html
:I understand that starting with a new tool can be challenging. Let’s address the issues you’re facing with Tailwind CSS.
Issue with Tailwind CLI:
You need to specify the correct source files for Tailwind processing. In your configuration file tailwind.config.js, you specified content: [‘./build/*.html’], but there is no build folder in your project structure. Try changing it to content: [‘./index.html’] to point to your web page file.
Styles Compilation:
You also encountered an issue with running the Tailwind CLI using the command npx tailwindcss -i ./src/input.css -o ./build/css/style.css –watch. Perhaps you are missing the postcss-cli package. Install it with the following command:
Then try using the command:
bash: npx tailwindcss build ./src/input.css -o ./build/css/style.css –watch
This command generates a CSS file based on your source files.
Style Inclusion:
Ensure that your style file is linked to your HTML document. In your case, the file style.css should be in the ./css/ folder, so your link should look like this:
After making these changes, your Tailwind CSS styles should start working. Try executing these steps and let me know the results!