前言

• tailwindcss 是一个原子化的 css 工具，可以让你免于写 css，只写 html 即可
• 原理：利用你写的 html 的 class 名称来生成 css 样式，理解为一个 postcss 插件或 loader

  第一步：安装 tailwindcss

  npm i -D tailwindcss
  

  第二步：引入 tailwindcss/tailwind.css

  • 在你的主程序里面引入此样式，和引入其他 UI 框架样式一样的写法

    // src/main.js
    import 'tailwindcss/tailwind.css'
    

    第三步：vite.config.js 配置插件

    import tailwindcss from 'tailwindcss'
    export default defineConfig({
      plugins: [vue()],
      css: {
        postcss: {
          plugins: [
            tailwindcss({
              content: ['./src/**/*.vue']
            })
          ]
        }
      }
    })
    

    完成

    • 这样你就可以在 vue 的 html 标签上添加 class 了，例如：w-10

      演示文本
      

      rem 改为 px

      • 默认生成的样式单位是 rem，但是有时候我们想要的是 px
      • 更改 vite.config.js 配置，改为 px

        import tailwindcss from 'tailwindcss'
        const spacing = {}
        Array.from({ length: 1000 }, (_, i) => {
          spacing[i] = `${i}px`
        })
        export default defineConfig({
          plugins: [vue()],
          css: {
            postcss: {
              plugins: [
                tailwindcss({
                  content: ['./src/**/*.vue'],
                  theme: {
                    spacing,
                    extend: {
                      fontSize: ({ theme }) => theme('spacing')
                    }
                  }
                })
              ]
            }
          }
        })
        

        其它替换 tailwind.css 使用的方式

        • 直接在 CSS（less, scss 文件都行） 里引入样式

          @tailwind base;
          @tailwind components;
          @tailwind utilities;
          

          • 如果只要 utilities 那么还可以简化
          • main.js

            import 'tailwindcss/utilities.css'
            

            • .{css,less,scss}

              @tailwind utilities;
              

              总结

              • 最简单的就是只使用前面三步就够了，更多操作和配置可以看官网或者源码