Wasp•2mo ago

More Tailwind troubles

I don't know what it is with Tailwind not liking me, but I followed the instructions exactly from a brand new blank Wasp app and it's not working. I've done it fine before, but now it seems to refuse to work. Is this just me, or are other people having issues as well?

14 Replies

ZekeOP•2mo ago

@kapa.ai I don't know what it is with Tailwind not liking me, but I followed the instructions exactly from a brand new blank Wasp app and it's not working. I've done it fine before, but now it seems to refuse to work. Is this just me, or are other people having issues as well?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're not alone—others have run into issues getting Tailwind working in Wasp, even when following the docs closely. Here are some common pitfalls and solutions based on recent reports and official guidance: 1. Config File Extensions: Make sure your config files are named with the .cjs extension (tailwind.config.cjs and postcss.config.cjs). Wasp will not detect them if they use .js instead Enabling Tailwind Step-by-Step. 2. Restart Wasp: After adding or changing Tailwind config files, you must restart wasp start. Wasp sometimes needs a restart to pick up new or changed config files Tailwind Docs. 3. Import Your CSS: Ensure you are importing your CSS file (e.g., Main.css) that includes the Tailwind directives (@tailwind base;, etc.) into your main React component. Missing this import is a common cause of Tailwind not applying styles Github Issue #1249. 4. Correct Content Paths: In Wasp 0.12.x, you need to wrap your content paths in tailwind.config.cjs with resolveProjectPath. For example:

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

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

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

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

Migration Guide 5. Directory Structure: Double-check your project structure matches the expected layout, with config files at the root and CSS/JS files in src/. If you've checked all of the above and it's still not working, you might want to look for typos or missing steps, as these have tripped up others as well. If you share your directory structure and config files, the community can often spot the issue quickly. So, no—it's not just you! These are common stumbling blocks, but following the above checklist usually resolves them. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zeke, 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?

ZekeOP•2mo ago

Carlos•2mo ago

what's your package.json?

ZekeOP•2mo ago

{
  "name": "wss",
  "type": "module",
  "dependencies": {
    "wasp": "file:.wasp/out/sdk/wasp",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2"
  },
  "devDependencies": {
    "typescript": "^5.1.0",
    "vite": "^4.3.9",
    "@types/react": "^18.0.37",
    "prisma": "5.19.1"
  }
}

{
  "name": "wss",
  "type": "module",
  "dependencies": {
    "wasp": "file:.wasp/out/sdk/wasp",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2"
  },
  "devDependencies": {
    "typescript": "^5.1.0",
    "vite": "^4.3.9",
    "@types/react": "^18.0.37",
    "prisma": "5.19.1"
  }
}

I made a project with OpenSaaS and it worked. So that I don't need to add Tailwind and ShadCN to all my projects in the future I just made a "Wasp Sensible Starter" template with just those enabled, npx wasp-sensible. Seems to be working so far.

MEE6•2mo ago

Wohooo @Zeke, you just became a Waspeteer level 6!

ZekeOP•2mo ago

splendid

Carlos•2mo ago

I think you need to add tailwind to your package.json From the docs: https://wasp.sh/docs/project/css-frameworks#enabling-tailwind-step-by-step:~:text=Wasp%20requires%20you%20to%20have%20Tailwind

# Wasp requires you to have Tailwind ^3.2.7 written in your package.json, you
# must explicitly install it.
npm install -D tailwindcss@3.2.7

# Wasp requires you to have Tailwind ^3.2.7 written in your package.json, you
# must explicitly install it.
npm install -D tailwindcss@3.2.7

ZekeOP•2mo ago

Ohh, maybe that's it. I read that section as "if you want to add plugins, you need to install tailwind" rather than it always being needed. Can the docs be updated to clarify that?

Carlos•2mo ago

yep, it should i only realized now can you try it out and if it works i'll make the issue

ZekeOP•2mo ago

yeah that worked if you want I can just update it right now since it's just moving it to the other section

Carlos•2mo ago

yep, that'd be grand! you can update this file https://github.com/wasp-lang/wasp/blob/main/web/docs/project/css-frameworks.md. You don't need to update the ones in the versioned_docs folder.

ZekeOP•2mo ago

apparently it's already here, but it's not in the deployed docs?

Carlos•2mo ago

Ah, perfect then! Will get released with the next version (this week!)

Gaming

Programming

More Tailwind troubles

Did you find this page helpful?