真香定律之学了Tailwindcss之后发现，它真的很香

Virtual09
2,547 阅读4分钟

前言

      近日Virtual09自己在写个小实战项目，一提到写项目，我们就必然要切页面的，那么切页面我们是使用最基本的css写法，还是less来写样式呢？最开始我也选择的是less，因为less写起来比较方便，但是啊，当我接触到了Tailwindcss，孩子我啊，直接被其简约的写法深深迷住了 。在本文中，我将会用一个小demo，为大家介绍Tailwiindcss，希望你们能喜欢.大家也可以借助官方文档来学习Tailwindcss中文文档

正文

安装Tailwindcss

image.png

我们选择一种安装方式，在我们终端安装好，然后在我们主CSS文件中通过@tailwindcss指令添加每一个Tailwindcss功能模块

@tailwind base;
@tailwind components;
@tailwind utilities;

最后不要忘了把该主CSS文件引入到入口文件中

image.png

样式编写

image.png

我们可以很清楚的看到，我们的表单中加了一个渐变色，在css中我们是如何实现渐变色的呢？我们给相应的类添加一个background-image: linear-gradient();的属性，就可以添加一个渐变色对吧，但是Tailwindcss它不需要你写类名,而是class=""里面写的是样式属性，在这里使用Tailwindcss添加渐变色为背景的话，我们加一个bg-gradient-to-t,t表示的是渐变方向，从下到上的渐变，t,l,b,r就表示上左下右四个方向，当然这里渐变方向也是可以组合的，比如bg-gradient-to-tr就从左下角到右上角的方向。.但是说好的渐变色，怎么在属性里都没看到颜色呢? 加颜色也是非常方便的，from-cyan-500 to-blue-500使用from和to后面接颜色，表示从颜色cyan-500渐变到blue-500,是不是很方便。 这就是刚刚渐变的效果。

image.png

想必看完上面的内容大家也不会觉得Tailwindcss会很方便，因为要记很多颜色什么的对吧，那么下面我为大家介绍一些基础属性。 在Tailwindcss字体大小的调整用的是text-xs，后面的xs表示字体的大小，后面可以写不同的参数，比如sm,base,lg等等，这些都是相对单位。而且使用text-xs这种写法设置字体大小，我们可以连行高都不用写了。

image.png

宽高的设置那就更加方便了，直接w-xxx表示你的宽度为xxx高的设置也是如此h-xxx

image.png

image.png

值得注意一下的的满屏是w-screen而不是w-full哦，高度也是一样的。 那么，我们盒子的定位啊，弹性布局啊，又是如何设置的呢？这一点我们只需要在class=""里面写属性,如果想写dispaly:flex我们直接写class="flex",怎么样，是不是很方便

image.png

定位position的用法也是一致的直接写在class里面就好了

image.png

看完这一丢丢，大家是不是能感受出来了Tailwindcss写样式，真的很简单。 现在我们来看看上面的登录表单是如何用Tailwindcss实现的呢？ 我们来分析下，我们对表单的父容器是做了一个圆角的处理，先给父容器添加边框border border-solid border-gray-500: 设置实线边框，颜色为 gray-500。然后再设置圆角rounded-xl: 边角为较大的圆角。然后使用弹性布局，就让内容居中flex justify-center: 使用 Flex 布局并将内容居中对齐。然后表单部分，我们让其垂直且水平居中:relative h-30 -translate-x-1/2 left-1/2,这里的-translate-x-1/2等同于transform:translateX(-50%).输入框与输入框之间也添加了个底部边距.

<div class="relative top-2 h-40 bg-gradient-to-b from-sky-200 to-sky-300  border border-solid border-gray-500 rounded-xl overflow-hidden flex justify-center mr-1 ml-1"> 
                <van-form @submit="onSubmit" class="relative h-30 -translate-x-1/2 left-1/2">
                    <van-cell-group inset class="relative top-5 w-4/5 ">
                    <van-field  
                            v-model="userId"
                            name="userId"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                            class="mt-2"
                        />
                        <van-field
                            v-model="password"
                            type="password"
                            name="password"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                            class="mt-2"
                        />
                    </van-cell-group>
                    <div class="relative top-8 w-4/5 translate-x-2">
                        <van-button 
                            round
                            block
                            type="primary"
                            native-type="submit">
                            登录
                        </van-button>
                    </div>
                </van-form>
        </div>

文章到这里也就结束了，感谢大家阅读，若有不足，恳请指出，谢谢大家！！

avatar
文章
阅读
粉丝