tailwindcss 最简单的使用方式

tailwindcss 最简单的使用方式

从头开始使用Tailwind CSS的最简单和最快的方法是使用Tailwind CLI工具。

1. 安装Tailwind CSS

通过npm安装 tailwindcss ，并创建您的 tailwind.config.js 文件。

#安装
npm install -D tailwindcss

#创建tailwind.config.js
npx tailwindcss init

2. 配置模板路径

将路径添加到 tailwind.config.js 文件中的所有模板文件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 将Tailwind指令添加到CSS中

将Tailwind的每个层的 @tailwind 指令添加到主CSS文件中。

src/input.css

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

4. 启动Tailwind CLI构建过程

运行CLI工具扫描模板文件中的类并构建CSS。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

5. 开始在HTML中使用Tailwind

将编译后的CSS文件添加到 中，并开始使用Tailwind的实用程序类来设置内容的样式。
src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

项目目录结构

.
├── package.json
├── tailwind.config.js
└── src
    ├── input.css
    └── output.css
    └── index.html

原理

Tailwind CSS的工作原理是扫描所有HTML文件、JavaScript组件、vue文件和任何其他模板以查找类名，生成相应的样式，然后将它们写入静态CSS文件。

例如本实例，output.css文件最下面添加了如下内容：

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.underline {
  text-decoration-line: underline;
}

源码

github

推荐

在vue2中使用tailwindcss（完整教程）