0

I have followed and installed TailwindCSS from this:

I have created a new test project and I add some code to index.html, but when I run it it does not apply TailwindCSS styles.

Here is the project structure with index.html file.

<link href="/dist/ouput.css" rel="stylesheet">

<body class="bg-blue-700">
  <p class="text-3xl">Hello World</p>
</body>

enter image description here

Here is the content of tailwind.config.js file:

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

Here is my input.css file:

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

I am using this command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

After I run the app, everything is white and without changing text style, but as you can see from the code, the background should be blue and bigger text.

enter image description here

Where I am making the mistake?

Improve this question
8
  • 1
    Your index.html file is within src folder. Change path to styles into ../dist/output.css or move index.html into the project root (out of src directory) Commented May 17, 2022 at 10:39
  • How to change the styles path? Can you post answer and I will accept it if it works fine? Commented May 17, 2022 at 10:41
  • In your HTML head section like <link href="../dist/output.css" rel="stylesheet"> Commented May 17, 2022 at 10:43
  • 1
    If you moved index file, the path should be ./dist/output.css, otherwise it will look this file at the root of your system. You may look at inspector what does it tell about output.css file (where does site cannot locate styles. which path is it). I'm almost positive this is relative path issue Commented May 17, 2022 at 10:47
  • 1
    It depends on environment, on a real web-server absolute path will work. as root server directory will be the project directory itself. Glad it helped that's enough for me) Commented May 17, 2022 at 10:56

3 Answers 3

Reset to default
0

Edit content value of module in tailwind.config.js file like:

content: ["./src/**/*.{html,js}"],

Remember go to output.css file then ctrl + S to save it.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I have done it, but it still does not work. I have updated my question.
0

In the input.css file, make sure that the last two tailwind utilities are at bottom, like this

@tailwind base;

html,body {
...
}


@tailwind components;
@tailwind utilities;
Improve this answer

1 Comment

I have those. I have updated my question with that file. Do you have other ideas?
0

for me I had to change the extension of the file tailwind.config.ts to tailwind.config.mjs

also the file postcss.config.cjs wasn't generated automatically

/* postcss.config.css */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.