index.html not working when moved outside the folder

user_17865110 0
Viewed 673

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>
tailwind-css
2 Answers

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
user_150326880

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

user_58121970
Related