Tailwind CSS 使用简介

参考网站安装 - Tailwind CSS 中文网

号称是开始使用 Tailwind CSS

通过 npm 安装 tailwindcss,并创建你的 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

复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;
启动 Tailwind CLI 构建进程

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

复制代码
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
开始在你的 HTML 中使用 Tailwind

将已编译的 CSS 文件添加到 <head> 并开始使用 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>
相关推荐
Apifox5 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞7 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行8 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758109 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周12 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队30 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js