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>
相关推荐
融化的雪10 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
Gazer_S21 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
鹏多多22 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
我血条子呢28 分钟前
[HTML]播放wav格式音频
前端·html·音视频
CodeSheep43 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员1 小时前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc1 小时前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii661 小时前
120html
前端
.生产的驴1 小时前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无1 小时前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html