加载 PostCSS 插件失败：找不到模块“tailwindcss”答案

【问题标题】：Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'加载 PostCSS 插件失败：找不到模块“tailwindcss”
【发布时间】：2022-01-03 16:49:17
【问题描述】：

这是我的第一个 Tailwind CSS 项目，从 CDN 开始，但我并不总是有互联网，所以我尝试使用 PostCSS 安装它，并且我使用 Vite 作为我的服务器。

从 CodeWithHarry 关注这个视频https://www.youtube.com/watch?v=aUunolbb1xU&list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O&index=3

我首先发起了这个项目

npm init -y

并通过

安装所需的包

npm install -D tailwind postcss autoprefixer vite

然后通过

启动 Tailwind CSS

npx tailwindcss init -p

我还在 input.css 文件中输入了@tailwind 指令。

但是当我跑的时候：

npm start

我的 vite 服务器向我打招呼：

[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)

我的 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>

我的tailwind.config.js：

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

我的 postcss.config.js：

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

我的 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"
  }
}

我该如何解决这个问题？

【问题讨论】：

标签： npm tailwind-css postcss vite autoprefixer

【解决方案1】：

并通过npm install -D tailwind postcss autoprefixer vite安装所需的包

包裹是tailwindcss而不是tailwind：

npm install -D tailwindcss postcss autoprefixer vite
npm tailwindcss init

【讨论】：