Tailwinds tailwind.config.js content property

user_2761808 0
Viewed 1218

I am trying to understand how the tailwind.config.js file works. I have a simple index.html file with tailwinds classes, and it works! But I don't understand how is it possible, because the content attribute from the tailwind.config.js is looking inside the ./src folder for the html templates, right?

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

  theme: {
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
    },
    extend: {
      colors: {
        midnight: "#121063",
      },
    },
  },
  plugins: [],
}

For some reason it reads/detect the files in the root as well (outside the src folder), is there any reason for this? Thanks.

Project stucture

node_modules
index.html
package.json
tailwind.config.js
postcss.config
vite.config
src/
   css/
   js/
tailwind-css
2 Answers

I see you are already using postcss. Here you define input CSS file and output file. The tailwindcss config file configures other things. With commands like for example: npm run build you build your application. Here the config files give the instructions on what to do.

Of course, you then use the output css in your index.html!

You can also just build the tailwindcss output file with an npx command. npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

user_148071110

Tailwind CSS works by scanning all HTML, JavaScript, and any other template files for class names, then generating all the corresponding CSS for those styles.

Consequently, the path ./src/**/*.{html,js} you defined in content means that any directory after src that contains html and js files of any name doesn't matter , TilwindCSS checks them.

  • Use * to match anything except slashes and hidden files
  • Use ** to match zero or more directories
  • Use comma separate values between {} to match against a list of options

For more information, refer to the following link: https://tailwindcss.com/docs/content-configuration

I hope I was able to solve your problem

user_169637390
Related