如何引入tailwindcss并使用

今天给他大家简单的介绍一下tailwindcss是如何引入到项目，并使用

这里我以一个Vue项目为例

下载和初始化tailwindcss配置文件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

使用postcss的话，配置文件如下

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

 在自动生成的tailwind.config.js文件中可以自定义样式规则

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [覆盖的文件的路径和文件类型（如："./src/**/*.{vue,js,ts,jsx,tsx}"）],
  theme: {
    extend: {
      columns: {
        '4xs': '14rem', //自定义
      }
    },
  }
  plugins: [],
}

创建一个main.css

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

再将main.css引入到main.js入口文件中

// main.js
import './main.css'

这样子就可以在页面中使用

// tailwindcss V2里一个单位是1px,
// tailwindcss V3中一个单位是4px
// 但是tailwindcss V3中可以直接写参数
<div class="w-96 bg-gray-400">w-(96*4)</div>

// class里写自定义参数
<div class="w-[96px] bg-[#171717]">w-96</div>

具体的class的参数写法请参考官网的写法：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网