胖蔡说技术介绍
Tailwind CSS 是一个利用公用程序类（Utilize Class，下文皆称Utilize Class）的 CSS 框架 。 但被我们称之为”原子类”, 其工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。
使用 Tailwind CSS，你可以使用Utilize Class轻松设置响应式设计，因此您无需设置媒体查询。它快速、灵活、可靠，没有运行时负担。
快速上手
依赖环境
Tialwindcss 支持多种环境安装实现 。
安装
使用tailwind cli
从零开始使用Tailwind CSS最简单、最快的方法是使用Tailwind CLI工具。如果您想在不安装Node.js的情况下使用CLI，CLI也可以作为独立的可执行文件使用（使用cli可执行文件不支持windows系统安装，这里不做介绍，默认需要安装nodejs环境， 配置使用参考在没有nodejs情况下如何使用Tailwind CSS）。
1. 安装 Tailwind CSS
$ npm install -D tailwindcss
$ npx tailwindcss init2. 配置适用文件地址
在 tailwind.config.js 配置文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}3. 全局加载 Tailwind指令
在我们的入口文件中导入一个全局css文件global.css , 如下：
// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;4. 开启Tailwind cli构建
运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。
$ npx tailwindcss -i ./src/global.css -o ./dist/output.css --watch5. 在html中使用tailwind
在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。
// index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>使用PostCss
将Tailwind CSS安装为PostCSS插件是将其与webpack、Rollup、Vite和Parcel等构建工具集成的最无缝的方式。
1. 安装 tailwindcss 并创建 tailwind.config.js
$npm install -D tailwindcss postcss autoprefixer # 安装tailwindcss、postcss
$ npx tailwindcss init # 创建tailwind.config.js文件
2. 将tailwindcss添加到postcss配置中
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}3. 配置适用文件
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}4. 添加tailwind指令到入口的css文件中
// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;使用CDN
使用CDN在浏览器中直接尝试Tailwind，无需任何构建步骤。CDN仅用于开发目的，不是生产的最佳选择。
1. 添加CDN脚本到目标html文件中
// index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script> <!--tailwindcss 脚本地址-->
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>2. 定制客制化配置
编辑tailwind.config对象以使用自己的自定义配置。
// index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
// 自定义配置
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<h1 class="text-3xl font-bold underline **text-clifford**">
Hello world!
</h1>
</body>
</html>3. 添加自定义tailwindcss样式
在html中通过适用 type="text/tailwindcss" 添加自定义的tailwind css样式
// index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
</html>4. 使用插件
通过在cdn地址中添加plugins参数开启插件使用，如 forms和typography
// index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>
评论前必须登录！
注册