Search code examples
npmtailwind-csspostcssviteautoprefixer

Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

This is my first Tailwind CSS project and started with CDN, but I did not always have internet, so I tried it installing using PostCSS, and I am using Vite as my server.

Followed this video from CodeWithHarry https://www.youtube.com/watch?v=aUunolbb1xU&list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O&index=3

I first initiated the project by

npm init -y

and installed required packages by

npm install -D tailwind postcss autoprefixer vite

and then initiated the Tailwind CSS by

npx tailwindcss init -p

and also I entered @tailwind directives in a input.css file.

But when I ran:

npm start

My vite server greeted me with this error:

[plugin:vite:css] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
 - C:\projects\2 Shidhu\twproject\noop.js
 
 (@C:\projects\2 Shidhu\twproject\postcss.config.js)

The error screenshot

My index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="input.css">
    <title>My first tailwindcss project</title>
</head>
<body>
    <nav class="bg-purple-900 text-white flex justify-between">
        
        <img src="./assets/logo.png" alt="logo" class="h-20 px-3 py-4">
        <ul class="flex space-x-11 justify-end pt-6 px-8 font-bold ">
            <li><a href="#" class="hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600">Home</a></li>
            <li><a href="#" class="hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600">About Us</a></li>
            <li><a href="#" class="hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600">Contact Us</a></li>
            <li><a href="#" class="hover:border-b-2 hover:text-fuchsia-600 hover:border-fuchsia-600">Blog</a></li>
        </ul>
    </nav>
    <main>
        <div class="bg-fuchsia-200 pb-8 flex justify-between">
            <div>
            <p class="font-bold text-3xl px-8 py-10">RubyMine</p>
            <p class="mx-8 w-80">RubyMine is a dedicated Ruby and Rails development environment. The IDE provides a wide range of essential tools for Ruby developers, tightly integrated together to create a convenient environment for productive Ruby development and Web development with Ruby on Rails. RubyMine is available for a free 30-day evaluation.</p>
            </div>
            <img src="./assets/logo.png" alt="logo" class="h-60 pt-16 pr-16">
        </div>
        <hr>
    </main>
</body>
</html>

My tailwind.config.js:

module.exports = {
    content: ["*"],
    theme: {
        extend: {},
    },
    plugins: [],
}

My postcss.config.js:

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

My package.json:

{
  "name": "twproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.1",
    "postcss": "^8.4.5",
    "tailwind": "^4.0.0",
    "vite": "^2.7.10"
  }
}

How can I solve this?

Solution

  • and installed required packages by npm install -D tailwind postcss autoprefixer vite

    The package is tailwindcss not tailwind:

    npm install -D tailwindcss postcss autoprefixer vite
npm tailwindcss init