什么是taiwindcss
官方给出的解释就是 只需 HTML 即可快速构建现代网站。
tip：再也不用每次写样式都翻到最下面了
传统的html应该就是3部分组成，css,html,js这三部分。而且在vue项目中，其实也是分为这3部分。而taiwindcss 能帮你解决的就是，你不用关心css部分的代码，直接在html中的标签class上直接来定义他的css样式。
原子化样式
- 传统的样式定义
<div class="content"></div>
...
.content{
font-size:12px;
color:white;
text-align:center;
}
- 原子化样式定义
多端适配
如果你想实现一个官网，且需要有多端适配的样式，那么重新开始选用taiwindcss是一个更好的选择！
需要注意的是，如果你想要更好的理解和快速开发，一定要好好理解和体会官方给到的提示：
移动端优先
开发时优先以移动端样式进行开发，后续再根据适配属性去定义PC端的样式。当然你也可以修改它默认的 screen配置项，通过调整为最大宽度断点，根据你现有的PC样式实现移动端的适配；
以下是官方提供的常见分辨率设备的 默认断点
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
/**
* 自定义屏幕断点, 用于响应式设计
* sm:bg-red-500
* https://tailwind.nodejs.cn/docs/screens
* min-width < screen < max-width
*/
screens: {
sm: '640px',
// => @media (min-width: 640px) { ... }
md: '768px',
// => @media (min-width: 768px) { ... }
lg: '1024px',
// => @media (min-width: 1024px) { ... }
xl: '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px'
// => @media (min-width: 1536px) { ... }
},
extend: {}
},
plugins: []
}
不要尝试通过sm:去区分是移动端
安装tailwindcss
这里主要是介绍如何在项目(vue3+vite4)中使用，想要了解详细的安装方法可参考官方文档。
- 通过 npm 安装
tailwindcss，autoprefixer（-webkit-,-moz-等前缀添加工具），并创建你的tailwind.config.js文件。
npm install -D tailwindcss autoprefixer
- 在
tailwind.config.js文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 在
main.js主文件中引入默认样式
import "tailwindcss/tailwind.css" // 引入 tailwindcss 样式
- 在
vite.config.js中配置 css.postcss css处理工具，否则运行时不会生效
PostCSS 就是 CSS 界的 Babel，承担css处理器的角色。包含处理一些常用的插件
Autoprefixer,cssnext等，识别一些浏览器尚未支持的语法，转换为浏览器支持的。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
...
css: {
postcss: {
plugins: [require('tailwindcss'),require('autoprefixer')]
}
}
})
- 🎉 大功告成！
在已有项目中安装tailwindcss
tip:因为
tailwindcss的 样式重用 特性，他会把所有相同的class进行原子化处理，所以在多个页面中出现相同类名，且类名下又定义了不同的样式属性，那么就会存在样式错乱的的问题。
除了按照以上的安装方法进行操作外，还需要注意配置特定的文件路径，避免出现样式的污染和重复。
在 tailwind.config.js 文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
// 禁用预加载，修复tailwind样式 与 naive-ui button等样式等冲突问题
// corePlugins: {
// preflight: false
// },
// content: ['./index.html', './src/**/*.{html,js,vue}'],
// 暂时只针对部分用到的组件进行预加载，预防影响其它已经确定的组件样式
content: ['./src/components/AppleWindow.vue','./src/views/cssHtml/tailwindcss使用.vue', './src/views/cssHtml/tailwindcss使用1.vue'],
...
plugins: []
}
