tailwindcss快速构建页面

• taiwindcss文档
• taiwindcss中文文档

什么是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)中使用，想要了解详细的安装方法可参考官方文档。

1. 通过 npm 安装 tailwindcss，autoprefixer（-webkit-,-moz-等前缀添加工具），并创建你的 tailwind.config.js 文件。

npm install -D tailwindcss autoprefixer

2. 在 tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 在main.js主文件中引入默认样式

import "tailwindcss/tailwind.css" // 引入 tailwindcss 样式

4. 在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')]
    }
  }
})

5. 🎉 大功告成！

在已有项目中安装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: []
}

可能对你有帮助

• VS Code 的智能感知(IntelliSense for VS Code)
• 快速掌握 Tailwind：最流行的原子化 CSS 框架
• 在线适配演示地址