tailwindcss第三方包的使用

tailwindcss第三方包的使用

在查看别人写的项目文件时发现，在标签上写的一些类名，但并没找到该类名的css, 询问后才知道大家用的这个包tailwindcss

引入后，只需要在标签上对应效果的类名即可实现对应的css效果，他的工作原理就是扫描所有的HTML文件、JavaScript组件以及任何我模板中的css类(class)名。然后生成相应的样式代码并写入到一个静态css文件中，减少了我们对于css样式的书写

接下来用简单的代码为大家展示他的安装及使用效果

注：默认情况下，4个单位等于1rem，即1个单位就是 1/4rem，大部分浏览器的html默认font-size为16px,因此换算过来，tailwindcss中的1个单位=16*1/4=4px
例如class=‘p-10’,就是设置的padding: 40px

安装

这里以vue项目为例

1. 下载第三方包

npm install -D tailwindcss postcss autoprefixer

2. 配置模板路径

执行npx tailwindcss init会自动生成tailwind.config.js文件或者手动在项目下新建tailwind.config.js文件
并给tailwind.config.js文件中配置模板文件的路径

/** @type {import('tailwindcss').Config} */
module.exports = {
//添加所有模板的文件路径,要在那些文件中使用就写那些文件路径
  content: [
  	"./index.html",
  	"./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 将加载的tailwind的指令添加到css文件中

这里可以直接在引入到main.js中的公共样式文件中写入

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

4. 将插件配置到postcss.config.js文件中

这里要注意的是，官方文档中写的是 module.export我们的项目启动可能会报错

这是我们只需要使用 export default {}导出即可，不要使用module

tailwindcss的使用

想要的效果可以直接在官方文档找出其对应属性的类名，直接给容器添加该类名即可实现css样式
这里以比较常用的flex为例

遇到比较陌生的属性，可以在w3school中的css的参考书中找到具体属性的解释