Tailwindcss 入门

最新推荐文章于 2024-08-31 21:18:22 发布

qq_29145339

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量511

点赞数

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_29145339/article/details/125026577

版权

Tailwindcss是一个功能类优先的CSS框架，提供原子类来快速构建网站，无需离开HTML。与Bootstrap等框架不同，它不包含预设组件，而是鼓励开发者自由组合原子类。文章介绍了为何选择Tailwindcss，包括解决语义化CSS维护困难和UI框架样式重置问题，并提供了V3 CDN的简单使用示例。

摘要由CSDN通过智能技术生成

[外链图片转存中…(img-zKWXMpFA-1653782988830)]

是什么？

[外链图片转存中…(img-waYLIzgM-1653782988831)]

Tailwindcss 是一个功能类优先的 CSS 框架，通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站，而不需要离开你的 HTML。就是记住原子类，不要再自己想 CSS 命名一股脑子写 HTMl 就行了！

它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件，比如：按钮、菜单和面包屑等。在 Bootstrap 中创建一个按钮：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Inf