CODEWITHSUNDEEP
javascriptdirectorytailwind-css
Tarushi
Tarushi

Reputation: 27

Tailwind Utility Classes

Directory Structure and Tailwind Configuration

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

The above code gives the following error when I try to run my project through npm run dev with a blank page opening up even though I'm just typing in "Hello World" right now -

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration

I'd be glad if someone could help me with this. Thanks!

Upvotes: 0

Views: 317

Answers (1)

Wongjn
Wongjn

Reputation: 24408

Consider checking:

  • You have actually used a utility class in any files covered by the content file globs. If you haven't yet, the warning is expected.
  • Your content file globs are correct. You have spaces in some of your file extension brace listings. This would mean the braces expand to:
    • src/**/*.js
    • src/**/*. ts
    • src/**/*. jsx
    • src/**/*. tsx
      These would not match your App.jsx I see in your screenshot for example. You'd either need to rename your App.jsx to App. jsx (with the space) or more commonly, remove the spaces in the braces, ./src/**/*.{js,ts,jsx,tsx} if you wanted Tailwind to scan the App.jsx you have open.

Upvotes: 1

Related Questions