Tailwind CSS上手体验

tailwindcss是一个CSS框架

现在的大多数CSS框架/组件库越来越强大,提供了很多开箱即用的组件,如日期选择器、完整的表单校验、警告提示、模态框等等… 而tailwindcss不同,它的目的是专注样式,将常用的样式代码封装成了“工具类”,在开发时把你想要的样式类名写在元素的class里。

比如你想要一个3列带间隔的grid布局的盒子,你只需要写:

<div class="grid grid-cols-3 gap-4">
    <div>1</div>
    <!-- ... -->
    <div>9</div>
</div>

要指定行数?加上 grid-rows-x

<div class="h-64 grid grid-cols-3 grid-rows-3 gap-4">
    <div>1</div>
    <!-- ... -->
    <div>9</div>
</div>

此类框架的缺点是:前期必须一直开着它的文档,每用到一个东西就要查一次。但好消息是文档非常易读明了,且提供了清晰的示例:

Snipaste_2021-03-20_15-12-40

 

另外加上开发工具的插件,提供了很好的代码提示

Snipaste_2021-03-20_15-15-06

在WebStorm和VSCode中的插件商店中搜索tailwindcss都可以找到代码提示的插件。

在熟悉一段时间后,差不多就猜透了它的类名的命名规律,搭配代码提示插件,开发效率会大幅提高,文档也不用经常查了。

比如说指定padding,就是命名成 p-x ,x是大小的数值。

padding-left?就是”pl-x”,同理padding-right就是”pr-x”。

左右都加padding?是”px-x”,那同理上下都加padding就是”py-x”。

熟悉了这些套路,margin的类名也能猜出来了,就是把”p”换成”m”就行了。

Snipaste_2021-03-20_15-40-00Snipaste_2021-03-20_15-40-19

最后这里是tailwindcss的文档地址,欢迎大家体验:

https://tailwindcss.com/docs

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/5033.html

发表评论

登录后才能评论