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>
相关推荐
qwaesrdt32026 分钟前
【如何使用大语言模型(LLMs)高效总结多文档内容】
前端
Ace_317508877634 分钟前
淘宝平台通过关键字搜索获取商品列表技术贴
前端
一个处女座的程序猿O(∩_∩)O1 小时前
vue 如何实现复制和粘贴操作
前端·javascript·vue.js
赔罪1 小时前
HTML-列表标签
服务器·前端·javascript·vscode·html·webstorm
谦谦橘子1 小时前
手写React useEffect方法,理解useEffect原理
前端·javascript·react.js
九州~空城1 小时前
C++中map和set的封装
java·前端·c++
椒盐大肥猫2 小时前
axios拦截器底层实现原理
前端·javascript
夕水2 小时前
我的2024-人生须为有益事
前端·年终总结
明月看潮生2 小时前
青少年编程与数学 02-006 前端开发框架VUE 08课题、列表渲染
前端·javascript·vue.js·青少年编程·编程与数学
前端要努力2 小时前
30而立,月哥的2024年终总结,小亏几百万
前端·后端·面试