tailwindcss一个响应式组件只用了50行代码不到,我决定在团队推广使用它

在写一个网站组件,我决定使用tailwindcss,究竟它的魅力在何处,start有73k,然后看到它代码更新频率还是属于正常维护的

发现它的中文文档也很友好tailwindcss.中文文档

我写了个组件,一个响应的组件,整行代码不足50行左右,看下效果如下

代码如下,完整代码不足50行左右

html 复制代码
<div class="px-3 py-3 rounded-[5px] bg-white mb-4 overflow-hidden">  
    <div class="flex max-sm:flex-col max-md:flex-col max-lg:flex-col max-xl:flex-row max-2xl:flex-row xl:space-x-3 2xl:space-x-4">  
        <div class="relative max-sm:basis-full max-md:basis-full max-lg:basis-full basis-8/12">  
        <h1 class="text-[18px] font-normal">赤壁市第六小学新建项目</h1>  
        <p class="text-[14px] pt-4 leading-5 text-justify line-clamp-2">赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司</p>  
        <div class="pt-2 space-x-3 space-y-2 pb-8">  
            <UBadge class="bg-gray-100 text-slate-900 cursor-pointer hover:bg-green-500 hover:text-white" :ui="{ rounded: 'rounded-full' }" size="sm">  
                <svg class="icon stroke-2 mr-1" aria-hidden="true">  
                    <use xlink:href="#haiwb-biaoqian"></use>  
                </svg>  
    测试  
            </UBadge>  
            <UBadge class="bg-gray-100 text-slate-900 cursor-pointer hover:bg-green-500 hover:text-white" :ui="{ rounded: 'rounded-full' }" size="sm">  
            <svg class="icon stroke-2 mr-1" aria-hidden="true">  
                <use xlink:href="#haiwb-biaoqian"></use>  
            </svg>  
        测试  
            </UBadge>  
        </div>  
        <div class="mt-3 flex items-center flex-row space-x-2 absolute bottom-0 left-0 w-full">  
            <div class="flex items-center flex-row flex-shrink-0">  
            <svg class="icon stroke-2 mr-1" aria-hidden="true">  
            <use xlink:href="#haiwb-naozhong"></use>  
            </svg>  
            <span class="text-[12px] text-gray-500">2023年07月16日 星期日</span>  
        </div>  
            <div class="flex items-center flex-row flex-shrink-0">  
            <svg class="icon stroke-2 mr-1" aria-hidden="true">  
            <use xlink:href="#haiwb-zuixinziyuan"></use>  
            </svg>  
            <span class="text-[12px] text-gray-500">32131</span>  
        </div>  
        <div class="flex items-center flex-row flex-shrink-0">  
            <svg class="icon stroke-2 mr-1" aria-hidden="true">  
            <use xlink:href="#haiwb-zixun"></use>  
            </svg>  
            <span class="text-[12px] text-gray-500">测试</span>  
        </div>  
        <div class="flex items-center flex-row basis-full justify-end">  
            <a class="flex items-center flex-row bg-slate-100 rounded-[5px] px-2 py-1" href="">  
                <svg class="icon stroke-2 mr-1" aria-hidden="true">  
                    <use xlink:href="#haiwb-biaoqiankuozhan_wode-285"></use>  
                </svg>  
                <span class="text-[12px] text-gray-500">测试</span>  
            </a>  
        </div>  
    </div>  
        </div>  
        <div class="max-sm:basis-full max-sm:mt-2 max-md:basis-full max-md:mt-2 max-lg:basis-full max-lg:mt-2 basis-4/12 ">  
            <div class="h-40">  
                <img fit="cover" class="w-full h-full object-cover" loading="lazy" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24e5e1b9bf8c41d4a638efdf6fecc239~tplv-k3u1fbpfcp-jj-mark:960:960:0:0:q75.avis#?w=800&h=250&s=23344&e=jpg&b=83728c" />
            </div>  
        </div>  
    </div>  
</div>

写完之后,我发现边距以及浏览器的兼容规范写法,tailwindcss都帮我们做好了,其实在线现实工作中又很大一部分人没有按照css的规范去编写样式,导致了自己也没有搞懂的css引发的边各种属性冲突问题

有很多人觉的引入了tailwindcss包变大,其实不然,tailwindcss官方早就帮我做好了,Tailwind CSS 非常注重性能,旨在通过仅生成你在项目中实际使用的 CSS 来生成尽可能小的 CSS 文件,结合缩小和网络压缩,这通常会导致 CSS 文件小于 10kB

配置

在你的项目根目录新建文件tailwind.config.js即可

java 复制代码
module.exports = {  
    theme: {  
        extend: {  
            // 配置去官网参考配置,按需要去定制自己的符合样式
        }  
    }  
}

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他类名称模板,生成相应的样式,然后将它们写入静态 CSS 文件

相关推荐
贩卖纯净水.5 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai3 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js