Tailwind css 实践指南

问题

前端开发过程中写CSS通常是一件很头疼的事情，大家都不愿意去写，有的公司甚至专门招实习生过来替自己写CSS，为什么大家都讨厌或者说不愿意去写CSS呢？主要有一下几个原因

1. 写CSS费事费力，而且还没有技术上的提升

• 上下文切换太麻烦，通常CSS是一个文件，我们给标签写类名的时候通常又是另一个文件，文件的来回切换很麻烦；或者当我们在Vue的style里面写CSS的时候，只要文件有点规模，上下文的切换也会显得很麻烦，体验非常糟糕
• 写CSS通常是一件重复性的工作，有大量的重复性的代码，给人的感觉就是忙了一天又好像什么也没干，花费了大量的时间而且没有技术上的提升

1. 需要自己想好合适的类名，类名不能太随便不能过长不能......

tailwindcss为解决这些问题带来了福音

我们首先来看个案例：

我们平时写 css ：

xml复制代码<template>
<div class="text">我是一个div</div>
</template>
......
<style>
.text{
  	font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}
</style>
<template>
<div class="text">我是一个div</div>
</template>
......
<style>
.text{
  	font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}
</style>

使用tailwindcss：

css复制代码<div className="text-base p-1 border border-black border-solid"></div><div className="text-base p-1 border border-black border-solid"></div>

就这一行就足够了，解释一下里面类名代表着什么：

css复制代码.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}
.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

这些CSS class不需要我们自己去写，这些都是tailwindcss给我们的，我们只需要在className里面写相应的类名就足够了，这就是原子化CSS带给我们的便利。

下面来讲一讲tailwindcss的优点、安装以及我在给一个React+Vite+Less的项目引入tailwindcss时遇到的问题

新世纪福音--tailwindcss

我们先来了解一下它自身的一些特点再来看看它的一些高级玩法