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 文件