tailwind css的使用

安装不成功，就不要安装了直接复制链接在文档使用就可以了，可一看到一样的效果。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

创建config .rb文件，或者不同名字的文件在文件夹，知道自己引用的样式即可。文件内容比较少也可以不创建。样式占据了四五百行可以考虑进行整理。

整理好也就一百多一点。还是很方便的。

在项目上的属性：

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

记不住没关系，可以多熟悉一下。

tailwind css的使用相关推荐

Hello Blazor：(2)集成Tailwind CSS续——nuget包方式
前段时间,写了一篇"Blazor如何集成Tailwind CSS"的文章.但是操作起来比较麻烦,又是命令行,又是要修改一大堆配置. 后来,我又找到一个更简单的方法. 实现方式新建 ...
Hello Blazor：(2)集成Tailwind CSS
Blazor默认集成了bootstrap,对于我这种后端出身,对CSS一知半解的.NET开发人员来说,使用起来还是有一定难度的. 好不容易才学到点皮毛,结果前端人员居然告诉我,bootstrap已经过 ...
使用React和Tailwind CSS搭建项目模板
公众号关注 "太空编程" 设为 "星标",带你了解硬核的编程知识! 众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind ...
使用React和Tailwind CSS搭建项目框架
众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板,一方面自己深入学习下,二来帮助新人更快地上手Tailwind CSS开发. 创建一 ...
tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？
tailwind css CSS is a technology that can be your best or worst friend. While it's incredibly flexib ...
Tailwind CSS 是一个工具集 CSS 框架
Tailwind CSS 是一个工具集 CSS 框架, 助你快速实现定制化的网站设计. Tailwind CSS 是一个高度可定制的基础层 CSS 框架,它为您提供了构建定制化设计所需的所有构建块,而 ...
Tailwind CSS如何单页面使用并压缩tailwindcss
tailwind的文档写的已经很全了,这里针对的是单页面构建不需要框架的对象创建文件夹初始化依赖包生成package.json 命令: npm init -y 安装必须品命令:npm insta ...
在react脚手架中使用Tailwind CSS （入门）
参考教程 Build a Website with React and Tailwind CSS - SitePoint 本文翻译外网,主要自用 1. 安装 Tailwind CSS 所需的依赖项 ...
Tailwind CSS
Tailwind CSS Tailwind CSS是一个实用程序优先的 CSS 框架,用于快速构建自定义用户界面. Useful Links 传奇:官方资源 Website - 官方 Tailwind ...
Zephyr 简介：用于 React Native 的 Tailwind CSS
使用纯 CSS 构建复杂的 Web 应用程序可能是一项艰巨的挑战. 因此,开发人员倾向于使用 Bootstrap 和 Tailwind CSS 等流行的样式库来缩短开发周期. 与 Web 上的样式类似 ...

tailwind css的使用

tailwind css的使用相关推荐

最新文章

热门文章