How can I build tailwindcss + daisyUI CSS files?

Question

1. Installed tailwindcss and tailwindcss/typography plugin with: npm install tailwindcss@latest and npm install -D @tailwindcss/typography.

2. Installed daisyUI with: npm i daisyui

3. Created tailwind.config.js manually:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },

  plugins: [require("@tailwindcss/typography"), require(getDaisyUI())],

  daisyui: {
  styled: true,
  themes: true,
  base: true,
  utils: true,
  logs: true,
  rtl: false,
  prefix: "",
  darkTheme: "dark",
  },
}

function getDaisyUI() {
  return "daisyui";
}

4. Building main.css file with: npx tailwindcss -c tailwind.config.js -i ./static/src/style.css -o ./static/css/main.css

This is the output of stdout:

byt3magic@MacBook-Pro project % npx tailwindcss -c tailwind.config.js -i ./static/src/style.css -o ./static/css/main.css

Rebuilding...

🌼 daisyUI components 2.50.2  https://daisyui.com
  ✔︎ Including:  base, components, 29 themes, utilities
  ❤︎ Support daisyUI:  https://opencollective.com/daisyui 
  

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

Done in 428ms.

5. I checked the main.css file and daisyUI is missing. This is the main.css file that was built: https://pastebin.com/k9AW7sEV

The content of main.css was too large to post here. This paste never expires.

How can I build the css files with daisyUI included?

I tried clearing the npm cache, deleting node_modules folder and reinstalling all packages. I still have the same issue. I didn't get any errors during the building process.

Answer 1

https://tailwindcss.com/docs/content-configuration

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

The solution is to define content in tailwind.config.js. Define all the folders where you use files that use tailwind classes.