tainwindcss 在 vite环境中的使用

作者

创建一个vite管理的项目,安装相关的依赖,最后完成一个使用 tailwindcss 制作前端模板的项目。

mkdir vite-tainwind
cd vite-tainwind/

创建项目,安装依赖

npm init  -y
npm install -D tailwindcss tailwindcss-cli  postcss autoprefixer vite

修改配置文件

{
  "name": "vite-tainwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite", // 增加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.3",
    "tailwindcss-cli": "^0.1.2",
    "vite": "^2.3.5"
  }
}

创建配置文件

 npx tailwindcss init -p

   tailwindcss 2.1.3

   ✅  Created Tailwind config file: tailwind.config.js
   ✅  Created PostCSS config file: postcss.config.js

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/css.css">
</head>
<body>
    <h1>vite && tailwindcss </h1>
</body>
</html>

检测运行环境

# 如果报错,尝试运行  node node_modules/esbuild/install.js
npm run dev -- --host 0.0.0.0

使用 tailwindcss

mkdir css
touch css/css.css
touch index.html

填写css内容

.test {
    color: red;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

运行并实时预览

回复

邮箱地址不会被公开。