TailwindCSS--原子化编程的CSS框架

qq_40977044

已于 2024-07-23 15:50:08 修改

阅读量602

点赞数 19

文章标签： css 前端

于 2024-07-16 10:42:08 首次发布

本文链接：https://blog.csdn.net/qq_40977044/article/details/140456098

版权

作为前端程序员的你，是否曾经为class的命名头疼过，既想命名语义化，又要避免重复，顶层的title，内部的title，重复了，那就title-1，title-2。。。采用vue框架的你，当组件文件的代码过长时，是否也有不停地上下翻动页面，来回修改html和style的烦劳，回到了vue2的时代。。。如果你也遇到过上述问题，那就从今天开始尝试下tailwindcss吧！

tailwindcss(Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网)本质上是一个包含大量css工具类的框架，可以帮助用户在html结构中直接使用定义好的css工具，避免重新定义class/id及书写样式代码。

简单示例

如下面的代码块所示，为常见的class配合style的书写方式，首先需要定义div的class，再根据class书写相应的样式代码

<style>
    .parent {
        height: 100px;
    }
    .parent .child1 {
        width: 10px;
        background-color: black;
    }
    .parent .child2 {
        height: 20px;
        color: pink;
    }
</style>

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

下面的代码块是采用tailwind改写后的结果，可以明显地看出采用tailwind的代码比未采用tailwind的代码要简洁很多，直接省略了class的命名和style样式代码

<div class="h-[100px]">
    <div class="w-[10px] bg-black"></div>
    <div class="h-[20px] text-[pink]"></div>
</div>

tailwind配置

推荐将tailwind配置在postcss插件中并结合webpack、rollup、vite等构建工具使用。

安装相关依赖包npm install -D tailwindcss postcss autoprefixer
在项目根目录下定义tailwind.config.js配置文件
在postcss.config.js中配置tailwind

// tailwind.config.js
module.exports = {
  // 只有定义在这里的文件或者目录包含在content中的文件才会生效
  content: ['./index.html', './src/**/*.vue'],
  theme: {}, // 自定义样式配置
  plugins: [],
}

// postcss.config.js
const path = require('path')

module.exports = {
  plugins: {
    tailwindcss: path.resolve(__dirname, 'tailwind.config.js'), //确定tailwind配置文件的位置
    autoprefixer: {},
  },
  ...
}

使用vscode开发的人员，推荐安装tailwind css interllisense插件，可以起到提示的作用，同时，鼠标hover的时候可以正确显示初始的css样式代码，由此判断tailwind书写是否正确

常用工具css

tailwind包含了大量定义好的css工具，全部浏览将会花费大量的时间，因此，本文对通用的知识点和高频使用的css工具进行了概括，主要包含以下几大模块

通用

尺寸

tailwind的常见尺寸包括以下3种，详细含义见代码块中的注释，若对尺寸不熟悉，便可全部采用[]的形式

<div class='h-1 w-2 top-1/2 text-[16px]'></div>

// h-1: height: 1rem
// w-2: width: 0.5rem
// t-1/2: width: 50%
// text-[16px]: font-size: 16px

空格

tailwind的空格通常会用下划线代替，示例如下

<div class='p-[10px_20px_5px_10px]'></div>
// 等价于padding: 10px 20px 5px 10px

常用类

下文表述了tailwind中经常使用的工具css，详细的工具可见于tailwind的官网

// 位置
left-0 bottom-0 right-0 top-0
left: 0; bottom: 0; right: 0; top: 0

// 文字
text-[16px] text-[#333] font-[600]
font-size: 16px; color: #333; font-weight: 600

// 边框
border-[1px] border-l-[1px] border-solid border-[#333]
border-width: 1px; border-left-width: 1px; border-style: solid; border-color: #333

// 缩写类
p-[1px_2px_3px_4px] px-[1px] py-[1px] m-[2px] mr-[3px]
padding: 1px 2px 3px 4px; padding: 0 1px; padding: 1px 0; maring: 2px; margin-right: 3px

// w-[1px] h-[1px] w-full h-full size-full
width: 1px; height: 1px; width: 100%; height: 100%; width: 100% height: 100%;

// min-w-[1px] max-h-[1px]
min-width: 1px; max-height: 1px;

// !w-[1px]
width: 1px !important;

// 值类
// absolute relative fixed sticky
position: absolute; position: relative; position: fixed; position: sticky

// display
// flex inline-block
position: flex; position: inline-block

// 选择器类
// hover:relative focus:relative
&:hover{position: relative}; &:focus{position: relative}

// 常用语法糖
space-x-[2px] // 含有该属性的容器的所有子容器以横轴方向间隔2px排列
 
space-y-[2px] // 含有该属性的容器的所有子容器以纵轴方向间隔2px排列

divide-x-[1px] // 含有该属性的容器的所有子容器横轴方向以1px的边框隔开

divide-y-[1px] // 含有该属性的容器的所有子容器纵轴方向以1px的边框隔开

truncate: 等价于 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} // 过长文本显示成...