一、为什么学习？

  • 简略
  • 高效
  • 易学

二、环境预备

在 html 中运用 tailwindcss

  • tailwindcss vscode 插件

在 html 中运用 tailwindcss

  • live server 插件

  • windows wsl2 环境

三、初始化项目

cd your_dir
pnpm init

依据自己熟悉的 npm 包管理工具初始化项目，此处运用 pnpm。

四、装置依靠

pnpm add tailwindcss -D

tailwindcss 在开发阶段开始运用，所以运用 -D。

五、创立 tailwindcss 装备文件

npx tailwind init --ts

生成 tailwindcss.config.ts 文件，并初始化装备, 初始化之后在 content 字段中增加 ./index.html:

import type { Config } from 'tailwindcss'
export default {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

content 装备了文件之后，每次构建都会读取 index.html 文件中，tailwindcss 的原子类。

六、增加 tailwindcss 指令

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

装备 css 文件，

七、编译 tailwindcss

  • 增加脚本
{
  "scripts": {
    "build": "npx tailwind -w ./src/styles/tailwind.css -o ./dist/tailwind.css"
  }
}

pnpm run build

在 dist 目录下，生成 ./dist/tailwind.css 文件。

八、在 html 中运用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tailwindcss</title>
  <link rel="stylesheet" href="./dist/tailwind.css">
</head>
<body>
  <div class="flex">This is tailwind css</div>
</body>
</html>

九、发动服务

运用 vs code 中运用 live server 发动 html 服务。

十、快速示例：flex 的水平笔直居中

<div class="bg-slate-700 h-[200px] text-cyan-400 flex justify-center items-center">
    This is tailwind css
</div>

十一、小结

本文首要介绍根据 html pnpm 的 tailwindcss 的基础用法，tailwindcss 生态中的 vscode 插件，cli 指令，装备文件装备。