I'm completely new to Tailwind.

I'm trying to install it with the cli method, but I am unable to install or configure it. I don't know why the not here isn't installed properly.

The first step I have done is:

npm install -D tailwindcss postcss autoprefixer

and then I install the vite for every time loading:

npm install vite

then with the npx method, I am unable to create a postcss and tailwind.config file. so I manually created it. postcss.config.js:

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

and the tailwind.config.js:

module.exports = {

      content: ["*"],
      theme: {
        extend: {},
      },
      plugins: [],
    }

Now when I run the server with npm run start, it shows an error like this:

    [vite] Internal server error: Failed to load PostCSS config (searchPath: C:/Users/DIPESH/Downloads/Project/Brand New Tailwind): [SyntaxError] Invalid or unexpected token
    C:\Users\DIPESH\Downloads\Project\Brand New Tailwind\ postcss.config.js:1
    ��m
    
    
    SyntaxError: Invalid or unexpected token
        at wrapSafe (node:internal/modules/cjs/loader:1469:18)
        at Module._compile (node:internal/modules/cjs/loader:1491:20)
        at Object..js (node:internal/modules/cjs/loader:1689:10)
        at Module.load (node:internal/modules/cjs/loader:1318:32)
        at Function._load (node:internal/modules/cjs/loader:1128:12)
        at TracingChannel.traceSync (node:diagnostics_channel:315:14)
        at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
        at cjsLoader (node:internal/modules/esm/translators:263:5)
        at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:7)
        at ModuleJob.run (node:internal/modules/esm/module_job:268:25)
      Plugin: vite:css
      File: C:/Users/DIPESH/Downloads/Project/Brand New Tailwind/style.css?direct

Can you help me to find the error? I am new, so your help would be appreciated.

I'm completely new to Tailwind.

I'm trying to install it with the cli method, but I am unable to install or configure it. I don't know why the not here isn't installed properly.

The first step I have done is:

npm install -D tailwindcss postcss autoprefixer

and then I install the vite for every time loading:

npm install vite

then with the npx method, I am unable to create a postcss and tailwind.config file. so I manually created it. postcss.config.js:

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

and the tailwind.config.js:

module.exports = {

      content: ["*"],
      theme: {
        extend: {},
      },
      plugins: [],
    }

Now when I run the server with npm run start, it shows an error like this:

    [vite] Internal server error: Failed to load PostCSS config (searchPath: C:/Users/DIPESH/Downloads/Project/Brand New Tailwind): [SyntaxError] Invalid or unexpected token
    C:\Users\DIPESH\Downloads\Project\Brand New Tailwind\ postcss.config.js:1
    ��m
    
    
    SyntaxError: Invalid or unexpected token
        at wrapSafe (node:internal/modules/cjs/loader:1469:18)
        at Module._compile (node:internal/modules/cjs/loader:1491:20)
        at Object..js (node:internal/modules/cjs/loader:1689:10)
        at Module.load (node:internal/modules/cjs/loader:1318:32)
        at Function._load (node:internal/modules/cjs/loader:1128:12)
        at TracingChannel.traceSync (node:diagnostics_channel:315:14)
        at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
        at cjsLoader (node:internal/modules/esm/translators:263:5)
        at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:7)
        at ModuleJob.run (node:internal/modules/esm/module_job:268:25)
      Plugin: vite:css
      File: C:/Users/DIPESH/Downloads/Project/Brand New Tailwind/style.css?direct

Can you help me to find the error? I am new, so your help would be appreciated.

• tailwind-css
• command-line-interface
• tailwind-ui

Share Improve this question Follow edited Mar 10 at 13:48 evolutionxbox 4,13266 gold badges3838 silver badges5757 bronze badges asked Mar 10 at 13:46 DipeshDipesh 1144 bronze badges 1

• Since January 2025, the installation mentioned in the question, npm install -D tailwindcss postcss autoprefixer, is no longer valid. For more information, read my answer and issue #1971 with PR #2022. – rozsazoltan Commented Mar 10 at 14:02

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

TailwindCSS v3

The error is here:

npm install -D tailwindcss postcss autoprefixer

Since January 2025, the npm install tailwindcss command installs the new v4 version instead of the old v3. If you want to use TailwindCSS v3, follow:

npm install -D tailwindcss@3 postcss autoprefixer

postcss.config.js

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

tailwind.config.js

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

app.css

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

• Get started TailwindCSS v3 with PostCSS - TailwindCSS v3 Docs

TailwindCSS v4 with PostCSS (not recommended for Vite since v4)

If you're interested in the new v4 version, review the many breaking changes and the new installation steps:

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

app.css

@import "tailwindcss";

• Get started TailwindCSS v4 with PostCSS - TailwindCSS v4 Docs

TailwindCSS v4 with Vite (recommended)

From your question, I gathered that you want to implement TailwindCSS in Vite. Up until v3, this could only be done using PostCSS. However, starting from v4, a new plugin has been introduced for this purpose.

v4 can be installed independently with PostCSS, but a fully compatible @tailwindcss/vite plugin has been created for TailwindCSS with Vite.

By using this, the integration steps in Vite are as simple as:

npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

app.css

@import "tailwindcss";

• Get started TailwindCSS v4 with Vite - TailwindCSS v4 Docs