W
Wasp•5w ago
Bruno Njeru

tailwind error

im getting this error [ Server ] [nodemon] app crashed - waiting for file changes before starting... [ Client!] 11:12:27 PM [vite] (client) Pre-transform error: [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. [ Client!] Plugin: vite:css [ Client!] File: /home/guinness/PetAll/src/index.css:undefined:NaN [ Client!] 11:12:28 PM [vite] (client) Pre-transform error: [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. [ Client!] Plugin: vite:css [ Client!] File: /home/guinness/PetAll/.wasp/out/web-app/src/components/Loader.module.css:undefined:NaN what does it mean?
3 Replies
kapa.ai
kapa.ai•5w ago
Hi @Bruno Njeru. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It means your PostCSS config is using tailwindcss as a plugin directly, but Tailwind moved the PostCSS plugin to a separate package. Update your PostCSS config to use the new plugin and ensure your Tailwind setup matches Wasp’s docs. Do this: 1) Create/update postcss.config.cjs: 
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}
2) Ensure tailwind.config.cjs uses resolveProjectPath: 
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: [],
}
3) Import Tailwind in your CSS (e.g., src/Main.css) and make sure that CSS file is imported in your page/component: 
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
4) Restart wasp start after changes. Setup references and required file names/locations are here (follow exactly, including .cjs extensions) (Enabling Tailwind Step-by-Step, Migrating the Tailwind Setup). If Tailwind still doesn’t apply, ensure your CSS file is actually imported in your page (Tailwind not working?). (Enabling Tailwind Step-by-Step: https://wasp-lang.dev/docs/project/css-frameworks#enabling-tailwind-step-by-step) (Migrating the Tailwind Setup: https://wasp-lang.dev/docs/migrate-from-0-11-to-0-12#migrating-the-tailwind-setup) (Tailwind: https://wasp-lang.dev/docs/project/css-frameworks#tailwind) (Tailwind not working issue: https://github.com/wasp-lang/wasp/issues/1249) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?
Bruno Njeru
Bruno NjeruOP•5w ago
i installed tailwind now im getting this error i installed tailwind now im getting this error @kapa.ai [ Client!] 11:56:26 PM [vite] (client) Pre-transform error: [postcss] 'import' and 'export' may appear only with 'sourceType: module' (2:0) [ Client!] Plugin: vite:css [ Client!] File: /home/guinness/PetAll/src/index.css:undefined:NaN [ Client!] 1 | @tailwind base; [ Client!] 2 | @tailwind components; [ Client!] 3 | @tailwind utilities; [ Client!] | ^ [ Client!] 4 | [ Client!] 5 | @layer base { [ Client!] 11:56:26 PM [vite] (client) Pre-transform error: [postcss] 'import' and 'export' may appear only with 'sourceType: module' (2:0) [ Client!] Plugin: vite:css [ Client!] File: /home/guinness/PetAll/.wasp/out/web-app/src/components/Loader.module.css:undefined:NaN [ Client!] 2 | color: var(--loader-color, #1a202c); [ Client!] 3 | } [ Client!] 4 | [ Client!] | ^ [ Client!] 5 | .loaderCircle { [ Client!] 6 | display: inline-block;
kapa.ai
kapa.ai•5w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- This error usually means the Tailwind/PostCSS setup isn’t configured as Wasp expects. Please verify these steps: 1) postcss.config.cjs must use the correct plugin and be CommonJS (.cjs): 
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}
Then restart wasp start. Wasp requires .cjs config files and a PostCSS config at the project root (Tailwind; Enabling Tailwind Step-by-Step). (Tailwind, Enabling Tailwind Step-by-Step) 2) tailwind.config.cjs should wrap content paths with resolveProjectPath: 
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: [],
}
This is required in Wasp so paths resolve correctly in the generated web-app. (Migrating the Tailwind Setup, Enabling Tailwind Step-by-Step) 3) Ensure your CSS with Tailwind directives is imported by your app (e.g., src/Main.css imported from your page/component). If it isn’t imported, styles won’t load. (Tailwind, Tailwind not working?) 4) Restart wasp start after changes so Wasp picks up Tailwind. (Tailwind) If you still see errors on files inside .wasp/out, double-check your PostCSS config path/extension and that you’re not using ESM syntax in the config files—Wasp expects .cjs as noted in the docs. (Enabling Tailwind Step-by-Step) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Bruno Njeru, 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?

Did you find this page helpful?