Tailwind css + React.js: tailwind config doesn't include the template paths in content

[Imesha Sudasingha]

When we create an SPA with react and tailwind enabled, following is the tailwind.config.ts file being created.

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note that the content is an empty array. But it should be:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note the "./src/**/*.{js,jsx,ts,tsx}" content (template paths)

[Md Hussain Nagaria]

Hey! Feel free to raise a PR or I will fix it soon.

[Md Hussain Nagaria]

Looks like the default config generated by tailwindCSS CLI is being used. I don't know what would be the right approach here, any thoughts @nikkothari22 ?

[Imesha Sudasingha]

@NagariaHussain I see. My experience is that, until I add the above into the content, CSS didn't get applied. May be we can mention that in the readme?

[Md Hussain Nagaria]

👍 Yeah, until we have better way, let's add it to README.