Wasp•6mo ago

Tailwind not working properly

I'm getting this error when I try to run my Wasp app after enabling Tailwind following the docs:

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

I'm not sure how to resolve this as I've followed the documentation as far as I can tell. I have ShadCN enabled as well, but I don't think that should really impact Tailwind's config. I copied the /components/ui folder, tailwind.css, tailwind.config.cjs, postcss.config.cjs, and components.json from a previous project, which worked flawlessly. I've run wasp clean and wasp start since installing.

5 Replies

kapa.ai•6mo ago

Hi @Zeke. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you’re seeing:

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

is not mentioned in the official Wasp documentation or the provided knowledge sources. The Wasp docs and community discussions describe the standard setup for Tailwind with Wasp, which involves: 1. Creating tailwind.config.cjs and postcss.config.cjs in your project root. 2. Using the .cjs extension (not .js). 3. Importing Tailwind into your main CSS file (e.g., @tailwind base; etc.). 4. Restarting wasp start after adding or changing config files, as Wasp sometimes needs a restart to pick up changes. 5. Using resolveProjectPath for all paths in the content array in tailwind.config.cjs (especially for Wasp 0.12+). Example 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: [],
}

Example postcss.config.cjs:

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

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

See official docs for details. Troubleshooting steps from the knowledge sources: - Make sure you are using .cjs for config files, not .js Docs > Tailwind. - Restart wasp start after adding or changing config files Docs > Tailwind. - Ensure you are importing your CSS file (e.g., Main.css) in your main React component Github Issue #1249. - If you migrated from another project, double-check that your config files match the Wasp docs, especially the use of resolveProjectPath in tailwind.config.cjs Migration Guide. Regarding the specific error about @tailwindcss/postcss: The knowledge sources do not mention the need to install @tailwindcss/postcss or update the PostCSS config in this way. This may be related to a newer version of Tailwind or PostCSS than what the Wasp docs currently cover. If you are using a newer version of Tailwind than what is documented, you may need to consult the official Tailwind CSS documentation for any breaking changes. Summary:
- Double-check your config files and their extensions. - Use resolveProjectPath in your tailwind.config.cjs. - Restart wasp start. - Make sure your CSS file is imported in your React entry point. - If the error persists and you are using the latest Tailwind, the knowledge sources do not provide a solution for the @tailwindcss/postcss package requirement. If you continue to have issues, you may want to try downgrading Tailwind to the version used in the Wasp docs, or consult the Tailwind changelog for recent breaking changes. The knowledge sources do not contain enough information to address this specific error message. ---------------------- 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•6mo ago

@kapa.ai how do I downgrade/check my tailwind version? it's not in my package.json

kapa.ai•6mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If Tailwind is not listed in your project's package.json, that's because Wasp manages some dependencies internally and does not always expose them directly in your package.json. This is expected behavior in Wasp projects, as described in the knowledge sources. Wasp brings some npm dependencies with it, and users can't always see or control their versions directly unless they explicitly add them as dependencies themselves. There is currently no straightforward way for users to check or downgrade the Tailwind version from package.json if it is managed by Wasp itself Implement new command: wasp deps list. A proposed feature is a command like wasp deps list, which would show all dependencies (including those managed by Wasp), but as of now, this is not implemented. The knowledge sources do not provide a built-in way to check or downgrade the Tailwind version managed by Wasp. If you need a specific version of Tailwind, you could try adding it explicitly to your dependencies, but be aware that this may cause version conflicts with the version Wasp expects, and Wasp may refuse to build if there is a mismatch Fix dependency version checking. In summary:
- There is no current built-in way in Wasp to check or downgrade the Tailwind version if it is not in your package.json. - Wasp manages some dependencies internally, and users cannot always override them. - If you try to add a different version manually, you may encounter version conflicts. If you need more control over dependency versions, you may need to wait for future Wasp features or workarounds discussed in the issues. ---------------------- 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•6mo ago

Made a new app and it worked

toticozeni•6mo ago

Glad you got it working.

Gaming

Programming

Tailwind not working properly

Did you find this page helpful?