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带给我们的便利。

下面来讲一讲tai