Tailwind CSS - Tailwind CSS 引入(安装、初始化、配置、引入、构建、使用 Tailwind CSS)

一、Tailwind CSS 概述

  1. Tailwind CSS 是一个功能优先的 CSS 框架,它提供了大量的实用类(utility classes),允许开发者通过组合这些类来快速构建用户界面

  2. Tailwind CSS 与传统的 CSS 框架不同(例如,Bootstrap),Tailwind 不提供预定义的组件,而是通过细粒度的类来控制样式,从而实现高度定制化的设计


二、Tailwind CSS 体验案例

1、安装 Tailwind CSS
  • 执行如下指令,安装 Tailwind CSS
shell 复制代码
npm install -D tailwindcss
2、初始化 Tailwind CSS
  • 执行如下指令,初始化 Tailwind CSS
shell 复制代码
npx tailwindcss init
  • 初始化完成后,会生成 tailwind.config.js 配置文件
js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
3、配置 Tailwind CSS
  • tailwind.config.js 配置文件中,自定义 Tailwind 的默认配置
js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
};
4、引入 Tailwind CSS
  • 在 CSS 文件 src/input.css 中引入 Tailwind 的基础样式、组件和实用类
css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;
5、构建 Tailwind CSS
  • 执行如下指令,构建 Tailwind CSS,由 src/input.css 文件构建得到 src/output.css 文件
shell 复制代码
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
6、使用 Tailwind CSS
  • 再 HTML 文件 src/index.html 中使用 src/output.css
html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./output.css" rel="stylesheet" />
        <title>index</title>
    </head>
    <body>
        <h1 class="text-3xl font-bold underline">Hello world!</h1>
    </body>
</html>

三、Tailwind CSS 体验案例解读

1、tailwind.config.js 配置文件解读
js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
};
(1)content
  1. content 是一个数组,用于指定 Tailwind CSS 应该扫描哪些文件以自动检测并包含哪些 CSS 类

  2. 这基于 purgecss 的功能,用于移除未使用的 CSS,从而减小最终 CSS 文件的大小

  3. 在这里配置为 ["./src/**/*.{html,js}"],这是一个 glob 模式,它匹配 src 目录下的所有 .html.js 文件,其中 ** 表示匹配任意深度的子目录

(2)theme
  1. theme 对象用于自定义 Tailwind CSS 的主题

  2. 可以在这里添加、修改、删除 Tailwind CSS 的默认主题变量,例如,颜色、间距、字体大小、边框半径等

  3. extend 属性用于扩展 Tailwind CSS 的默认主题,而不是完全覆盖它

(3)plugins
  • plugins 数组用于添加 Tailwind CSS 插件,Tailwind CSS 插件用于扩展 Tailwind CSS 的功能
2、构建 Tailwind CSS 解读
shell 复制代码
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
  1. npx tailwindcss:执行 Tailwind CSS 的 CLI 命令

  2. -i ./src/input.css-i 用于指定 Tailwind CSS 应该读取的源文件路径,这里 Tailwind CSS 将读取 src/input.css 文件中的样式信息,并根据 tailwind.config.js 文件中的配置进行处理

  3. -o ./src/output.css-o 用于指定 Tailwind CSS 处理后的文件应该保存到的路径

  4. --watch:告诉 Tailwind CSS 的以监视模式运行,在监视模式下,Tailwind CSS 将持续监视输入文件及其依赖项的变化(例如,tailwind.config.js 配置文件、任何通过 @tailwind 指令引入的文件),一旦检测到变化,它将自动重新编译输出文件

相关推荐
YongGit2 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士40 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js