Wasp•2w ago

Tailwind issue

After installing tailwind according to the official instructions, i get the following error:

[ Client!] warn - The `content` option in your Tailwind CSS configuration is missing or empty.
[ Client!] warn - Configure your content sources or your generated CSS will be missing styles.
[ Client!] warn - https://tailwindcss.com/docs/content-configuration

[ Client!] warn - The `content` option in your Tailwind CSS configuration is missing or empty.
[ Client!] warn - Configure your content sources or your generated CSS will be missing styles.
[ Client!] warn - https://tailwindcss.com/docs/content-configuration

Here's my configuration: Package.json:

{
  "name": "daisyui-test",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "prisma": "5.19.1",
    "tailwindcss": "^3.2.7",
    "typescript": "5.8.2",
    "vite": "^7.0.6"
  }
}

{
  "name": "daisyui-test",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2",
    "wasp": "file:.wasp/out/sdk/wasp"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "prisma": "5.19.1",
    "tailwindcss": "^3.2.7",
    "typescript": "5.8.2",
    "vite": "^7.0.6"
  }
}

postcss.config.js:

export default {
        plugins: {
                tailwindcss: {},
                autoprefixer: {},
        },
}

export default {
        plugins: {
                tailwindcss: {},
                autoprefixer: {},
        },
}

tailwind.config.js:

import { resolveProjectPath } from "wasp/dev";

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

import { resolveProjectPath } from "wasp/dev";

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

Main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

12 Replies

kapa.ai•2w ago

Hi @Zoomi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see the issue with your Tailwind configuration. According to the Wasp documentation on Tailwind setup, you need to use .cjs extensions for your config files, not .js extensions. The documentation explicitly states:

Make sure to use the .cjs extension for these config files, if you name them with a .js extension, Wasp will not detect them.

Here's what you need to change: 1. Rename your config files: - postcss.config.js → postcss.config.cjs - tailwind.config.js → tailwind.config.cjs 2. Update the syntax to CommonJS format: tailwind.config.cjs:

const { resolveProjectPath } = require('wasp/dev')

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

const { resolveProjectPath } = require('wasp/dev')

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

postcss.config.cjs:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. Restart wasp start after making these changes. As mentioned in the Tailwind documentation, you may need to restart Wasp to ensure it picks up the configuration changes and enables Tailwind integration. The issue is that you're using ES module syntax (export default and import) with .js extensions, but Wasp expects CommonJS syntax (module.exports and require) with .cjs extensions for these configuration files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zoomi, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

ZoomiOP•2w ago

I thought we dont us cjs in wasp 0.18?

MEE6•2w ago

Wohooo @Zoomi, you just became a Waspeteer level 1!

miho•2w ago

Bot sometimes says something that's outdated @kapa.ai we don't use cjs anymore for Tailwind since 0.18.0

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You're absolutely right that my answer was outdated. However, I need to note that the knowledge sources provided to me do not contain information about Wasp version 0.18.0 or any changes to the Tailwind configuration format after that version. The documentation I have access to consistently shows the .cjs extension requirement and CommonJS syntax for Tailwind configuration files. The most recent information I have is from the migration guide from 0.11.X to 0.12.X and the current Tailwind setup documentation, both of which specify using .cjs files with CommonJS syntax. If Wasp 0.18.0 introduced support for ES module syntax (.js files with import/export) for Tailwind configuration, this information is not available in my current knowledge sources. Could you point me to the relevant documentation or changelog for version 0.18.0 so I can provide accurate information going forward? In the meantime, if your original configuration with .js extensions and ES module syntax is correct for your version of Wasp, the error you're experiencing might be due to a different issue with how the content paths are being resolved. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•2w ago

@Zoomi which template are you using, starting with minimal?

ZoomiOP•2w ago

Yes, minimal

miho•2w ago

Did you do anything specific that would differ from the regular setup? If you are using it, maybe your coding agent did something unexpected? I've used the wasp new app -t minimal and followed the instructions in https://wasp.sh/docs/project/css-frameworks and ~~it worked for me.~~ Let me test it a bit more, and I'll report back.

ZoomiOP•2w ago

Thank you miho! Ill set up another project later that day to make sure my setup didn't mess anything up 👍

miho•2w ago

It might be on us, I'll check it with the team and report back, thank you for your patience 🙂 Can you trying installing latest Tailwind v3 with npm install -D tailwindcss@3? ^ we updated the docs to suggest that since Tailwind 3.2.7 doesn't support ESM config which we updated to in Wasp 0.18.0 so it's best to install Tailwind with npm install -D tailwindcss@3 @kapa.ai that a note of this

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for this clarification! However, I must note that the knowledge sources provided to me do not contain information about this Tailwind version compatibility issue with Wasp 0.18.0, nor do they mention the recommendation to install Tailwind with npm install -D tailwindcss@3. The knowledge sources I have access to do not include: - Documentation about Wasp 0.18.0 changes - Information about Tailwind 3.2.7's lack of ESM config support - The updated recommendation to install tailwindcss@3 specifically This means that when users ask about Tailwind configuration issues (like the original query in this conversation), I cannot provide this important context about version compatibility because it's not present in my current knowledge base. To help users accurately going forward, I would need access to: 1. Updated documentation that mentions the Tailwind version compatibility issue 2. The changelog or migration guide for Wasp 0.18.0 3. Any notes or warnings about installing the correct Tailwind version Without this information in my knowledge sources, I cannot provide guidance on this specific issue, even though it appears to be directly relevant to the user's original problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

ZoomiOP•2w ago

Thank you miho! I'll try to do that!

Gaming

Programming

Tailwind issue

Did you find this page helpful?