CODEWITHSUNDEEP
tailwind-css
JuHyeo
JuHyeo

Reputation: 11

index.html not working when moved outside the folder

I am fairly new to tailwindcss. I got their installation stuff working but I want to make changes in the dir files. I want my index.html outside from the src folder, but everytime I move it outiside src the tailwind class does not work.

here's my directory tree

package.json

  "devDependencies": {
    "tailwindcss": "^3.0.12"
  }
}

tailwind.config.js

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

index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold text-purple-700">
    안녕하세요
  </h1>
</body>
</html>

Upvotes: 1

Views: 2271

Answers (2)

Sercan
Sercan

Reputation: 5081

You need to change the content field in the tailwind.config.js file. In your current project settings, html and js source files should be in directory {project_directory}/src/. In your current settings, the project directory structure should be as follows:

project_directory/
   |
   |--- tailwind.config.js
   |
   |--- dist/
   |       | 
   |       |--- output.css 
   |
   |--- src/ 
           |
           |--- input.css
           |
           |--- index.html
           |
           |--- main.js

You can move source files to different directories by updating field content in file tailwind.config.js. In the example below, the definition in the content field in the tailwind.config.js file is to show that the index.html file can be located in the project root directory. For more information, read the document in the references section.

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './index.html',
  ]
}

If you want to move the index.html file to the project root, update the content field in the tailwind.config.js file as follows:

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

Upvotes: 2

Arippe
Arippe

Reputation: 21

using the chrome inspector tool console, check if the css file is loaded. If it shows 404 error, your css file link is wrong.

Upvotes: 0

Related Questions