
## Tailwind CSS 简介

「Atomic/Utility-First CSS」，是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。不管你是否听说过「Semantic CSS 」这个名词，实际项目开发中，它都是我们最常用、也是最传统的 CSS 规范。Tailwind CSS是一种和传统CSS编写方式不一样的开发模式，Tailwind CSS编写大量的css的class，预置超多的css样式，让开发者可以通过在HTML的class中以命名的方式去调用这些class，几乎可以不用去写style的代码，只使用class的名称来代替。

## Tailwind CSS 环境搭建

最简单的方式就是通过引用CDN：

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

一个简单的例子：

    <div class="sm:container mx-auto h-64 bg-gray-100 flex">
        <div class="text-slate-950 text-2xl bg-gray-200 h-1/2 flex-1">11</div>
        <div class="text-blue-600 text-xl bg-gray-400 flex-1">222</div>
    </div>



<div class="sm:container mx-auto h-64 bg-gray-100 flex">
    <div class="text-slate-950 text-2xl bg-gray-200 h-1/2 flex-1">11</div>
    <div class="text-blue-600 text-xl bg-gray-400 flex-1">222</div>
</div>

再来看一个flex布局，以及box阴影的样式：

    <div class="flex flex-wrap sm:container bg-gray-200">
        <div class="shadow-sm w-48 h-48 m-5"></div>
        <div class="shadow w-48 h-48 m-5"></div>
        <div class="shadow-md w-48 h-48 m-5"></div>
        <div class="shadow-lg w-48 h-48 m-5"></div>
        <div class="shadow-xl w-48 h-48 m-5"></div>
        <div class="shadow-2xl w-48 h-48 m-5"></div>
    </div>

<div class="flex flex-wrap sm:container bg-gray-200">
    <div class="shadow-sm w-48 h-48 m-5"></div>
    <div class="shadow w-48 h-48 m-5"></div>
    <div class="shadow-md w-48 h-48 m-5"></div>
    <div class="shadow-lg w-48 h-48 m-5"></div>
    <div class="shadow-xl w-48 h-48 m-5"></div>
    <div class="shadow-2xl w-48 h-48 m-5"></div>
</div>
<br>


再来看文字排版：

    <div class="text-center mt-10">
        <p class="text-xs">Tailwind CSS</p>
        <p class="text-sm">Tailwind CSS</p>
        <p class="text-base">Tailwind CSS</p>
        <p class="text-lg">Tailwind CSS</p>
        <p class="text-xl">Tailwind CSS</p>
        <p class="text-2xl">Tailwind CSS</p>
        <p class="text-3xl">Tailwind CSS</p>
        <p class="text-4xl">Tailwind CSS</p>
        <p class="text-5xl">Tailwind CSS</p>
        <p class="text-6xl">Tailwind CSS</p>
    </div>

<div class="text-center mt-10">
    <p class="text-xs">Tailwind CSS</p>
    <p class="text-sm">Tailwind CSS</p>
    <p class="text-base">Tailwind CSS</p>
    <p class="text-lg">Tailwind CSS</p>
    <p class="text-xl">Tailwind CSS</p>
    <p class="text-2xl">Tailwind CSS</p>
    <p class="text-3xl">Tailwind CSS</p>
    <p class="text-4xl">Tailwind CSS</p>
    <p class="text-5xl">Tailwind CSS</p>
    <p class="text-6xl">Tailwind CSS</p>
</div>


## Tailwind CSS的优点

可以不再使用传统的style编写方式，通过预置的class可以减少更多的错误，而且熟练了之后css样式的编写会很快。因为预置，可以重复使用省去更多的时间。

## Tailwind CSS的缺点

每个class中要声明使用大量的css class，开始的时候可能会不太习惯，不过我几个小时后再用的时候我就觉得我已经离不开她了。


## 总结

Tailwind CSS上手简单，只要你略懂css的属性，这个框架对于你编写css样式绝对是如虎添翼。

参考：

[Tailwind CSS 中文官方文档](https://www.tailwindcss.cn/)

[使用 Tailwind CSS 一年后，我的一些感受](https://juejin.cn/post/6951300894684577823#heading-4)

[一次就能看懂的Tailwind CSS介绍](https://juejin.cn/post/7042901516499288077)




Tailwind CSS是一种和传统CSS编写方式不一样的开发模式，Tailwind CSS编写大量的css的class，预置超多的css样式，让开发者可以通过在HTML的class中以命名的方式去调用这些class，几乎可以不用去写style的代码，只使用class的名称来代替。

Tailwind CSS的安装配置和体验


今天在vscode中安装Tailwind CSS IntelliSense这个插件，但是安装完后，编写HTML中的class的时候并没有得到tailwindcss的代码提示，看来配置项设置有问题。

## 解决方法：

1. 打开vscode的首选项-用户配置的JSON文件，打开方法快捷键：cmd(ctrl)+shift+p 搜索：user 基本就能看到了。
2. 添加如下配置JSON代码：

    "editor.quickSuggestions": {
        "strings": true
    },

保存后重启vscode即可。

参考：

[Tailwind CSS IntelliSense 官方文档](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

今天在vscode中安装Tailwind CSS IntelliSense这个插件，但是安装完后，编写HTML中的class的时候并没有得到tailwindcss的代码提示，看来配置项设置有问题。

安装了Tailwind CSS IntelliSense插件 vscode没有代码提示


TailwindCSS上手确实很好用，有点明显，但是坑也挺多的。本来打算使用TailwindCSS制作一个全新的博客主题，但是在实际的使用过程中有一些不爽细节不吐不快。

### TailwindCSS在使用中的缺点

1. 响应式布局后，在移动端加载页面如果使用了过渡效果，页面会有过渡的动画闪过，有点不爽。
2. hover:效果，添加修改宽度的w-8值的时候，没有实际的效果，但是修改背景的颜色是可以的，也就是说，hover:可能有一定的限制？并不是所有的效果都可以进行修改。
3. 没有组件，如果单单使用TailwindCSS，所有的组件内容都得自己做，官方的UI组件样式不足，貌似还收费。
4. 和其他的的框架组合使用会出现莫名其妙的坑。
5. 预置的颜色太少了，虽然可以自己编译添加。

这是目前发现的一些TailwindCSS使用中的坑。

### TailwindCSS的优点

1. 响应式布局很方便，把所有要用到的css属性都预置了。
2. 对元素进行一些基本的css样式设置非常方便，不用单独在sytle的文件里写代码了。
3. css的过渡和动画可以快速的使用起来。

以上就是昨天使用一天TailwindCSS的心得。

TailwindCSS上手确实很好用，有点明显，但是坑也挺多的。本来打算使用TailwindCSS制作一个全新的博客主题，但是在实际的使用过程中有一些不爽细节不吐不快。

解决方法：

相关文章