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>
相关推荐
Sailing3 小时前
🚀🚀 从前端到AI Agent开发者,只差这一篇入门指南
前端·后端·ai编程
草帽lufei3 小时前
轻松上手WSL安装与使用
linux·前端·操作系统
TimelessHaze3 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
长存祈月心3 小时前
Rust 迭代器适配器
java·服务器·前端
先树立一个小目标3 小时前
puppeteer生成PDF实践
前端·javascript·pdf
冲刺逆向3 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
啃火龙果的兔子3 小时前
Promise.all和Promise.race的区别
前端
马达加斯加D3 小时前
Web身份认证 --- OAuth授权机制
前端
2401_837088503 小时前
Error:Failed to load resource: the server responded with a status of 401 ()
开发语言·前端·javascript
全栈师3 小时前
LigerUI下frm与grid的交互
java·前端·数据库