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