使用 Vite 安装 Tailwindscss

两个都是目前很火的开发工具，使用起来效率会很高

1:创建项目目录

2:进入项目目录初始化 NPM

npm init -y

 3:将 Tailwindscss 与 vite 一起安装

npm install -D tailwindcss postcss autoprefixer vite

4: 创建 Tailwindscss  初始化文件

npx tailwindcss init -p

 5:两个配置文件

postcss.config.js

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

tailwind.config.js , content 添加了要热更新的目录文件，可以多行

/** @type {import('tailwindcss').Config} */

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

 6: 创建 Tailwindcss 入口 css，并添加以下内容 例如:dist/css/index.css

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

7: 更新 package.json 文件

“scripts”: {
   “test”: “echo \”Error: no test specified\” && exit 1″
 },

#更改为如下

“scripts”: {
   “start”: “vite”
 },

 8:根目录创建 html 文件并且引入创建的 css 入口文件 dist/css/index.css

<link rel="stylesheet" href="dist/css/index.css">

9:根目录启动项目

npm run start

窗口会输出带端口的本地连接，Enjoy it