TailwindCSS的使用
【摘要】 TailwindCSS的使用
Tailwind CSS
1、认识和介绍
官方在线网站
离线地址
https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css
使用Tailwind CSS的案例如下图：
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
<a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
2、安装使用Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
yarn add -D tailwindcss postcss autoprefixer
代码解释如下：
1. `tailwindcss`: 这是一个流行的 CSS 框架，它提供了一套灵活的 CSS 实用程序类，用于快速构建现代化的 Web 界面。
1. `postcss`: 这是一个用于处理 CSS 的工具，它可以通过插件扩展其功能。在这种情况下，它用于将 Tailwind CSS 与 Autoprefixer 集成，以自动添加所需的浏览器前缀。
1. `autoprefixer`: 这是一个 PostCSS 插件，用于自动为 CSS 添加浏览器特定的前缀，以确保样式在不同的浏览器中都能正确显示。
3、tailwindcss配置
npx tailwindcss init -p
这个时候我们的目录跟文件下面已经多了一个文件
tailwind.config.js
文件内容如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
tailwindcss.config.js，修改成如下内容:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js, jsx, ts, tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
将加载 Tailwind 的指令添加到你的 CSS 文件中
在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。
主要的css之中引入
@tailwind base;
@tailwind components;
@tailwind utilities;
开启 Tailwind CLI 构建流程
运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
在你的 HTML 代码中使用 Tailwind 吧
在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 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>
4、vue之中使用
☞ 安装tailwindcss
yarn add tailwindcss
npx tailwindcss init
yarn add postcss
yarn add autoprefixer
yarn add -D tailwindcss postcss autoprefixer
☞ 配置tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
☞ 配置postcss.config.js
在项目根目录下创建或编辑 postcss.config.js 文件，并添加 Tailwind CSS 插件
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
// 其他 PostCSS 插件
]
}
🙋 踩坑
Tailwindcss不生效
如果项目中单独引入了全局样式文件，那么上面创建的tailwind.css文件在引入时务必放在全局样式文件上面，否则Tailwindcss不会生效。如下：
vite.config.ts配置问题
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [tailwindcss, autoprefixer],
},
},
})
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）