Tailwinds tailwind.config.js content property

Question

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/

Answer 1

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