文章/答案/技术大牛

发布

社区首页 >专栏 >解锁网页设计新境界：一文掌握Tailwind CSS

解锁网页设计新境界：一文掌握Tailwind CSS

一个程序猿的异常

发布于 2024-03-18 05:39:13

1.3K00

代码可运行

文章被收录于专栏：一个程序猿的异常一个程序猿的异常

运行总次数：0

代码可运行

Tailwind CSS简介

Tailwind CSS是一个高度可定制的实用工具优先的CSS框架，它提供了构建网站界面的底层CSS类，使得开发者可以通过组合这些类来快速构建出独特的设计。与传统的CSS框架（如Bootstrap或Foundation）不同，Tailwind不提供预设计的组件，而是提供原子化的、可复用的工具类，使得你可以按照自己的设计轻松地创建界面，而不必覆盖大量预设样式。

想象一下，你有一盒色彩鲜艳、形状各异的积木。每块积木都有其独特的大小、颜色和形状，就像CSS中的各种样式规则。Tailwind CSS就像这样一盒精心设计的积木，每块积木代表一个CSS工具类——这是你用来搭建和设计网页的基本元素。

积木盒（Tailwind CSS的设计理念）

精选的积木集合： Tailwind提供了一套预先定义的CSS工具类（积木），这些工具类涵盖了边距、填充、字体大小、颜色、布局和更多的样式需求。这就像拥有各种颜色和形状的积木，你可以自由组合它们来创建任何东西。
自定义你的积木盒： 尽管Tailwind给你提供了大量的预定义积木，但你可能还想要一些特别的积木来满足特定的设计需求。Tailwind允许你通过配置文件轻松添加或修改积木（工具类），以适应你的设计语言。

Utilize Class 可以理解成一块块的积木，是原子的不可分割的。

搭建过程（使用Tailwind CSS）

选择积木： 开始设计页面时，你首先要做的是从积木盒中挑选合适的积木。例如，如果你需要一个带圆角和蓝色背景的按钮，你可以选择相应的rounded和bg-blue-500积木。
组合积木： 接着，你将这些积木（工具类）组合在一起，应用到HTML元素上，就像是把不同的积木拼凑在一起搭建一个房子或是造一辆车。这种方法的美妙之处在于你可以随时重新组合积木，轻松地调整和优化你的设计。
创造独一无二的作品： 通过不断地选择和组合积木，你最终会创造出一个独一无二的网页设计。每个使用Tailwind CSS的项目都可以具有完全不同的外观和感觉，尽管它们是用相同的工具类搭建的。

深色模式的积木变化（深色模式支持）

想象在你的积木盒中有一组特殊的积木，这些积木在晚上可以发光。在Tailwind CSS中，支持深色模式就像是给你的网页添加了一组可以在用户设备的深色模式下自动变化的积木。通过简单地切换积木（例如，从bg-white到bg-black），你可以让你的设计适应不同的环境，增强用户体验。

使用Tailwind CSS就像是玩一盒无限可能的积木。你可以自由地选择和组合这些积木，创造出既满足功能需求又具有独特美感的网页设计。无论你是想要快速搭建一个原型，还是打造一个完全定制的生产级应用，Tailwind的积木都能帮你高效地实现目标。

安装

大概了解原理以后，让我们动手实践起来吧，编程是一门实践艺术，要不断尝试才能牢记于❤。

尽管 tailwind 提供了多种安装方式，为了快速上手我们使用最简单的 npm 安装。

# 创建新目录
mkdir tailwind-template
cd tailwind-template
# 初始化项目配置
npm init -y
# 安装 TailwindCss
npm install -D tailwindcss
# 初始化tailwincss配置文件
npx tailwindcss init
# 使用编辑器打开目录
code .

配置 `tailwind.config.js`

将下面的内容复制到 tailwind.config.js 文件内

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

我们主要介绍下 content: ["./src/**/*.{html,js}"],这行配置告诉 Tailwind CSS 搜索项目中的 ./src 目录下所有扩展名为 .html 和 .js 的文件。** 是一个通配符，表示匹配任何目录、子目录及其中的文件。因此，./src/**/*.{html,js} 匹配 ./src 目录及其所有子目录中的所有 .html 和 .js 文件。当你运行 Tailwind 的构建过程时，Tailwind 会分析这些文件，查找所有用到的 Tailwind 类名。然后，它将生成一个 CSS 文件，其中只包含这些类名对应的样式。这个过程称为“提取”（purging），有助于减少最终生成的 CSS 文件的大小，因为它消除了未使用的样式。

简而言之，content 属性是 Tailwind CSS 配置中一个非常重要的部分，它确保了最终部署的 CSS 文件是精简和高效的。如果你不正确设置 content，那么你可能会得到一个包含大量未使用样式的 CSS 文件，这会增大文件体积并可能影响页面加载时间。

开始写代码

做完前面的基础配置以后可以畅快的写代码了，在根目录下创建 src 目录，为什么是 src 目录呢？上面有答案哦~

在src目录下新建 main.css 输入以下内容。

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

构建CSS

# 启动 Tailwind CLI 构建过程
npx tailwindcss -i ./src/main.css -o ./src/style.css --watch

运行上面命令以后会在 src 目录生成 style.css 文件，可以观察下文件内容

开始在 HTML 中使用 Tailwind

新建 index.html 文件，输入以下内容：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    一个程序员的异常，开启TailWindCSS 学习之旅
  </h1>
  <button class="bg-green-400 font-semibold text-white py-2 px-4 rounded hover:bg-green-700">北封</button>
  <button class="bg-green-400 font-semibold text-white py-2 px-4 rounded hover:bg-green-700">北封</button>

</body>
</html>

在src 目录下新建命令行终端，执行 npx live-server 查看效果。

image-20240312090602827

几个简单的 CSS 样式就实现了下划线文本和漂亮的按钮，并且鼠标滑过也只是添加一段class样式而已 hover:bg-green-700 ，太神奇了。

压缩CSS 代码

 npx tailwindcss -i ./src/main.css -o ./src/style.css --minify

复用样式

在main.css 文件添加下面的代码：

@tailwind base;
@tailwind components;

@layer components {
    .btn-primary {
        @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
    }
}

@tailwind utilities;

这样在样式一直的组件上就能快速复用了。

优化 `package.json`

细心的你会发现，我们为了达到实时预览的效果使用了两条命令，那么能不能把两个命令简化成1个呢？答案肯定是可以的。

安装 `concurrently`

在你的项目目录中打开命令行界面，执行以下命令：

npm install --save-dev concurrently

配置 `package.json`

接下来，需要在package.json的scripts部分添加一个新的脚本来使用concurrently运行你的两个命令。在package.json的scripts部分定义两个子命令，例如，一个用于启动Tailwind CSS的构建和监视进程，另一个用于启动live-server。然后定义一个父命令来调度这两个子命令：

  "scripts": {
    "test": "echo \"power by beifffeng@gmail.com\" && exit 1",
    "watch": "tailwindcss -i ./src/main.css -o ./src/style.css --watch",
    "serve": "npx live-server src",
    "dev": "concurrently npm:watch npm:serve",
    "build": "tailwindcss -i ./src/main.css -o ./src/style.css --minify"
  },

运行开发服务器

npm run dev

这个命令将同时执行watch和serve这两个子命令，使得你在开发过程中只需一个命令窗口就能实现CSS的实时编译和页面的实时预览。

通过这种方式组织你的npm脚本，可以使得脚本更加清晰和模块化，便于管理。每个脚本都专注于一个任务，而总的开发命令dev则负责协调这些任务，使它们并行执行。这种模式在复杂项目中尤其有用，可以帮助你保持构建和服务脚本的清晰度。

官方文档

当你初次踏入Tailwind CSS的世界时，感觉就像是进入了一个充满了色彩和可能性的迷宫。每一步都可能是一个新的发现，或者是一个需要询问导游的转弯。别担心，这是完全正常的！想象一下，你正装备着探险帽，手持望远镜，准备深入这片未知的领域。在这个旅途中，官方文档就像是你的宝典，里面藏着所有秘密和宝藏的地图。

官网就像是那个总是有答案的智慧老者，不论你遇到什么问题——无论是寻找那个完美的颜色，还是调整间距到刚刚好——这位老者总有最合适的建议。所以，每当你感到迷茫或是需要灵感时，不妨直接访问Tailwind CSS的官方文档 https://tailwindcss.com/docs它不仅仅是一个文档，更是一个充满了解答和灵感的宝库。

记住，每个伟大的探险者在开始他们的旅程时都可能会觉得有点不适应。但正是这些不断的探索和学习，最终使他们成为了领航者。所以，拿起你的探险工具，大胆地走进Tailwind CSS的世界，让官网成为你的指南，引领你发现更多的可能性。别忘了，每个CSS类都是一个积木，等待你去发掘和组合，创造出属于你自己的精彩设计。

祝你在Tailwind CSS的旅途中发现无限宝藏！🚀

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-03-12，如有侵权请联系 cloudcommunity@tencent.com 删除

脚本