tailwindcss

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

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

简单易用的tailwindcss响应式组件(50行左右代码)(简单易用的视频剪辑软件) 第1张

简单易用的tailwindcss响应式组件(50行左右代码)(简单易用的视频剪辑软件) 第2张

我写了个组件，一个响应的组件，整行代码不足50行左右，

看下效果如下

简单易用的tailwindcss响应式组件(50行左右代码)(简单易用的视频剪辑软件) 第3张

代码如下

完整代码不足50行左右

<p class="c788-5da1-1093-fb36 px-3 py-3 rounded-[5px] bg-white mb-4 overflow-hidden">  
    <p class="5da1-1093-fb36-7bf1 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">  
        <p class="1093-fb36-7bf1-1da6 relative max-sm:basis-full max-md:basis-full max-lg:basis-full basis-8/12">  
        <h1 class="fb36-7bf1-1da6-a617 text-[18px] font-normal">赤壁市第六小学新建项目</h1>  
        <p class="1da6-a617-fe6b-7946 text-[14px] pt-4 leading-5 text-justify line-clamp-2">赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司赤壁市锦华工程造价咨询有限公司</p>  
        <p class="c50e-6f7a-8fbc-ebad pt-2 space-x-3 space-y-2 pb-8">  
            <UBadge class="6f7a-8fbc-ebad-54db bg-gray-100 text-slate-900 cursor-pointer hover:bg-green-500 hover:text-white" :ui="{ rounded: 'rounded-full' }" size="sm">  
                <svg class="6191-c54e-c788-5da1 icon stroke-2 mr-1" aria-hidden="true">  
                    <use xlink:href="#haiwb-biaoqian"></use>  
                </svg>  
    测试  
            </UBadge>  
            <UBadge class="c54e-c788-5da1-1093 bg-gray-100 text-slate-900 cursor-pointer hover:bg-green-500 hover:text-white" :ui="{ rounded: 'rounded-full' }" size="sm">  
            <svg class="c788-5da1-1093-fb36 icon stroke-2 mr-1" aria-hidden="true">  
                <use xlink:href="#haiwb-biaoqian"></use>  
            </svg>  
        测试  
            </UBadge>  
        </p>  
        <p class="5da1-1093-fb36-7bf1 mt-3 flex items-center flex-row space-x-2 absolute bottom-0 left-0 w-full">  
            <p class="1093-fb36-7bf1-1da6 flex items-center flex-row flex-shrink-0">  
            <svg class="fb36-7bf1-1da6-a617 icon stroke-2 mr-1" aria-hidden="true">  
            <use xlink:href="#haiwb-naozhong"></use>  
            </svg>  
            <span class="7bf1-1da6-a617-fe6b text-[12px] text-gray-500">2023年07月16日 星期日</span>  
        </p>  
            <p class="1da6-a617-fe6b-7946 flex items-center flex-row flex-shrink-0">  
            <svg class="a617-fe6b-7946-7a51 icon stroke-2 mr-1" aria-hidden="true">  
            <use xlink:href="#haiwb-zuixinziyuan"></use>  
            </svg>  
            <span class="fe6b-7946-7a51-7f15 text-[12px] text-gray-500">32131</span>  
        </p>  
        <p class="7946-7a51-7f15-c50e flex items-center flex-row flex-shrink-0">  
            <svg class="7a51-7f15-c50e-6f7a icon stroke-2 mr-1" aria-hidden="true">  
            <use xlink:href="#haiwb-zixun"></use>  
            </svg>  
            <span class="7f15-c50e-6f7a-8fbc text-[12px] text-gray-500">测试</span>  
        </p>  
        <p class="c50e-6f7a-8fbc-ebad flex items-center flex-row basis-full justify-end">  
            <a class="6f7a-8fbc-ebad-54db flex items-center flex-row bg-slate-100 rounded-[5px] px-2 py-1" href="">  
                <svg class="6191-c54e-c788-5da1 icon stroke-2 mr-1" aria-hidden="true">  
                    <use xlink:href="#haiwb-biaoqiankuozhan_wode-285"></use>  
                </svg>  
                <span class="c54e-c788-5da1-1093 text-[12px] text-gray-500">测试</span>  
            </a>  
        </p>  
    </p>  
        </p>  
        <p class="c788-5da1-1093-fb36 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 ">  
            <p class="5da1-1093-fb36-7bf1 h-40">  
                <img fit="cover" class="1093-fb36-7bf1-1da6 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" />
            </p>  
        </p>  
    </p>  
</p>

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

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

配置

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

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

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

以上就是简单易用的tailwindcss响应式组件(50行左右代码)的详细内容，更多关于tailwindcss响应式组件的资料请关注酷瑞百科其它相关文章！

☆未收藏(0)