tailwindcss 配置没有获取我的源文件

Question

I have followed all the steps as described here enter link description here And here is my tailwindcss.config.cjs file.

   /** @type {import('tailwindcss').Config} */
  module.exports = {
      content: [
        "./index.html",
        "./src/**/*.{js, ts, jsx, tsx}",
       ],
    theme: {
    extend: {},
   },
  plugins: [],
}

What am I doing wrong?

Answer 1

I came across a subtle nuance with tailwindcss config when defining where tailwind should watch your files.

I had typed the following into my tailwind.config.cjs file:

      /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./index.html",
       "./src/**/*.{js, ts, jsx, tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

For a while I couldn't see why tailwind was not picking up my files. Upon closer inspection the spaces matter in the value pair of the array.

Because tailwind uses glob-patterns which are regular expressions, the spaces do matter.

Intuitive in hindsight but for me a subtle nuance which I hope helps somebody down the line getting started with tailwind setup in new projects.

Note the correct file without spaces:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
      ],
     theme: {
     extend: {},
     },
    plugins: [],
   }