使用 Vite 安装 Tailwindscss

最新推荐文章于 2024-08-05 17:02:53 发布

myarche

最新推荐文章于 2024-08-05 17:02:53 发布

阅读量1.0k

点赞数

文章标签： npm vue.js 前端

本文链接：https://blog.csdn.net/myarche/article/details/130845493

版权

本文介绍了如何高效地使用TailwindCSS和Vite进行前端开发，包括创建项目目录，安装依赖，配置PostCSS和Autoprefixer，设置TailwindCSS的初始化文件和入口CSS，更新package.json脚本，以及启动本地服务进行预览。

摘要由CSDN通过智能技术生成

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

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

关注