Tailwind CSS的介绍和使用

最新推荐文章于 2025-03-02 10:38:31 发布

可爱的秋秋啊

最新推荐文章于 2025-03-02 10:38:31 发布

阅读量981

点赞数 4

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/mq1314520_zhl/article/details/139339351

版权

css 专栏收录该内容

7 篇文章

订阅专栏

1、介绍

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。

官网：Font Family - TailwindCSS中文文档 | TailwindCSS中文网

2、安装并使用

安装 Tailwind CSS

通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

npm install -D tailwindcss
npx tailwindcss init

配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径

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

将加载 Tailwind 的指令添加到你的 CSS 文件中

在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

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

开启 Tailwind CLI 构建流程

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

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

在你的 HTML 代码中使用 Tailwind 吧

在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类来为你的内容设置样式了。

<!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>

3、在vue项目中实际的使用及效果图

在目录styles添加文件taiwind.scss文件并添加代码

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

在main.js中引入

// 引入 tailwind css
import './styles/tailwind.scss'

在代码中使用

Tailwind CSS的介绍和使用

1、介绍

2、安装并使用

配置模板文件的路径

将加载 Tailwind 的指令添加到你的 CSS 文件中

开启 Tailwind CLI 构建流程

在你的 HTML 代码中使用 Tailwind 吧

3、在vue项目中实际的使用及效果图