Tailwind CSS - 版本历史

Riguz：/* Tailwind CSS恐惧症 */

2024-12-15T06:46:48Z

Tailwind CSS恐惧症

←上一版本		2024年12月15日 (日) 06:46的版本
第162行：		第162行：
	或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。		或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。

	~~<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>~~

	PS：在Thoughtworks技术雷达中，Tailwind CSS早在2021年即标记为试验。然而似乎大佬们对这一技术缺乏关注，时至今日（2024/12/15），显然Tailwind CSS已经十分流行，个人认为，是时候标记为采纳了。		PS：在Thoughtworks技术雷达中，Tailwind CSS早在2021年即标记为试验。然而似乎大佬们对这一技术缺乏关注，时至今日（2024/12/15），显然Tailwind CSS已经十分流行，个人认为，是时候标记为采纳了。

	~~参见：https~~://www.thoughtworks.com/zh-cn/radar/languages-and-frameworks/tailwind-css		参考：

			* https://www.thoughtworks.com/zh-cn/radar/languages-and-frameworks/tailwind-css
			* https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

	[[Category:Hacker Radar]]		[[Category:Hacker Radar]]

Riguz：/* 要不要“Semantic” CSS？ */

2024-12-15T06:46:14Z

要不要“Semantic” CSS？

←上一版本		2024年12月15日 (日) 06:46的版本
第27行：		第27行：

	这再平常不过了。但是有人说，这样不好。你的HTML和样式混杂在一起了。		这再平常不过了。但是有人说，这样不好。你的HTML和样式混杂在一起了。
	~~HTML应该管类容，CSS才管样式。~~		HTML应该管内容，CSS才管样式。

	所以你应该这样写，用.blog-content来表示这是一段博客文字内容。		所以你应该这样写，用.blog-content来表示这是一段博客文字内容。

Riguz：/* 样式的复用：组合还是继承？ */

2024-12-15T06:45:48Z

样式的复用：组合还是继承？

←上一版本		2024年12月15日 (日) 06:45的版本
第74行：		第74行：
	* 通过样式A衍生出一个样式B，姑且称之为继承		* 通过样式A衍生出一个样式B，姑且称之为继承
	* 两个完全不相干的样式A和B在一起使用，姑且称之为组合		* 两个完全不相干的样式A和B在一起使用，姑且称之为组合


	比如说对flex布局设计两个class用来组合：		比如说对flex布局设计两个class用来组合：

Riguz：/* 要不要“Semantic” CSS？ */

2024-12-15T06:36:44Z

要不要“Semantic” CSS？

←上一版本		2024年12月15日 (日) 06:36的版本
第44行：		第44行：
	* 所谓“样式”跟“结构”是没法完全分开的，布局改变也意味着需要HTML结构改变，这些没法单纯在CSS中实现		* 所谓“样式”跟“结构”是没法完全分开的，布局改变也意味着需要HTML结构改变，这些没法单纯在CSS中实现
	* 这种实践起来最终结果大概率是CSS和HTML元素内容一一对应，以至于实际上，写.blog-content其实与.a001并没有太大的区别		* 这种实践起来最终结果大概率是CSS和HTML元素内容一一对应，以至于实际上，写.blog-content其实与.a001并没有太大的区别


	一种常见的场景是，同样是博客内容但是在列表和详情页面样式会不一样，但是从“Semantic”的角度来说，它们应该是一样的，比如都叫.blog-content。		一种常见的场景是，同样是博客内容但是在列表和详情页面样式会不一样，但是从“Semantic”的角度来说，它们应该是一样的，比如都叫.blog-content。

Riguz：/* Tailwind CSS体验 */

2024-12-15T06:30:42Z

Tailwind CSS体验

@@ 第131行： / 第131行： @@
 HTML跟样式不分离的好处这里就体现出来了。你不需要去对着css就大概能直接看出这个页面的布局。
 当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。
 使用Tailwind CSS之后，一大好处是，你几乎真的不用写自己的CSS了。

Riguz：/* Tailwind CSS体验 */

2024-12-15T06:23:32Z

Tailwind CSS体验

←上一版本		2024年12月15日 (日) 06:23的版本
第131行：		第131行：
	HTML跟样式不分离的好处这里就体现出来了。你不需要去对着css就大概能直接看出这个页面的布局。		HTML跟样式不分离的好处这里就体现出来了。你不需要去对着css就大概能直接看出这个页面的布局。
	当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。		当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。

			使用Tailwind CSS之后，一大好处是，你几乎真的不用写自己的CSS了。

	或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。		或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。

Riguz：/* 样式的复用：组合还是继承？ */

2024-12-15T06:22:45Z

样式的复用：组合还是继承？

@@ 第96行： / 第96行： @@
 </syntaxhighlight>
-提供一些基础的class样式——CSS工具类来实现组合，这是一个简单但又确实有用的思想。
+尽管在CSS领域，很少有人提“继承”这个概念，但确实有类似的事情。使用@extend即可以做到：
 这样的做法又被称为是Utility-first的方式。

Riguz：/* Tailwind CSS体验 */

2024-12-15T06:17:53Z

Tailwind CSS体验

←上一版本		2024年12月15日 (日) 06:17的版本
第124行：		第124行：
	<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>		<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>

	PS：在Thoughtworks技术雷达中，Tailwind ~~CSS早在2021年即标记为试验。https~~://www.thoughtworks.com/zh-cn/radar/languages-and-frameworks/tailwind-css		PS：在Thoughtworks技术雷达中，Tailwind CSS早在2021年即标记为试验。然而似乎大佬们对这一技术缺乏关注，时至今日（2024/12/15），显然Tailwind CSS已经十分流行，个人认为，是时候标记为采纳了。

			参见：https://www.thoughtworks.com/zh-cn/radar/languages-and-frameworks/tailwind-css

	[[Category:Hacker Radar]]		[[Category:Hacker Radar]]

Riguz：/* Tailwind CSS体验 */

2024-12-15T01:59:43Z

Tailwind CSS体验

←上一版本		2024年12月15日 (日) 01:59的版本
第123行：		第123行：

	<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>		<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>

			PS：在Thoughtworks技术雷达中，Tailwind CSS早在2021年即标记为试验。https://www.thoughtworks.com/zh-cn/radar/languages-and-frameworks/tailwind-css

	[[Category:Hacker Radar]]		[[Category:Hacker Radar]]

Riguz：/* 样式的复用 */

2024-12-15T01:51:52Z

样式的复用

←上一版本		2024年12月15日 (日) 01:51的版本
第61行：		第61行：
	所以也许在HTML中想把样式和内容彻底分离这种想法本身就不合理。		所以也许在HTML中想把样式和内容彻底分离这种想法本身就不合理。

	= ~~样式的复用~~ =		= 样式的复用：组合还是继承？ =

			其实，各种CSS框架尝试去解决的问题无非就是一个——如何进行复用。

			如果有一段代码逻辑，你需要写N遍，那么很自然你会用一个方法来封装一下，不至于每次都写一遍。

	~~这样，如果要改变某一个div的样式，直接去改它对应的class就可以了。~~		在网页中，相同的样式、相同的组件、相同的布局，等等，是太多太多了。

	~~但是这样有一个问题，如果系统复杂的情况下：~~		所以，类似是组合还是继承更优的话题，其实在CSS里面也有：

	* ~~我们不可能给每一个div都单独一个class，势必需要复用一些已有的样式，也就是说，多个div会应用到同一个class~~		* 通过样式A衍生出一个样式B，姑且称之为继承
	* ~~不同的class中也会有重复的样式，为了进一步复用，那么可以将它们再分散成不同的class进行组合~~		* 两个完全不相干的样式A和B在一起使用，姑且称之为组合

	~~比如说这样：~~		比如说对flex布局设计两个class用来组合：

	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
第85行：		第87行：
	</syntaxhighlight>		</syntaxhighlight>

	~~这样在html中可以通过组合一些class来实现复用：~~		在HTML中：

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
第94行：		第96行：
	</syntaxhighlight>		</syntaxhighlight>

	~~提供一些基础的class样式来实现组合，这是一个简单但又确实有用的思想。这样的框架其实很多，像Bootstrap就是，~~		提供一些基础的class样式——CSS工具类来实现组合，这是一个简单但又确实有用的思想。
	~~但现在你会看到Tailwind CSS十分流行。~~		这样的做法又被称为是Utility-first的方式。

	~~究其原因，大概是因为这个框架封装的确实很有格调。比如，下面这一段代码：~~		= Tailwind CSS体验 =

			现在，你会看到Tailwind CSS十分流行。很多流行的框架都提供Tailwind CSS的支持。

			Tailwind CSS使用起来也比较简单。比如，下面这一段代码：

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
第111行：		第117行：
	</syntaxhighlight>		</syntaxhighlight>

	~~首先，跟传统的写法不一样，你不需要去对着css就大概能直接看出这个页面的布局——非常直观。当然稍微需要一点学习成本，比如pt~~-16意思是padding-top: 16px。		HTML跟样式不分离的好处这里就体现出来了。你不需要去对着css就大概能直接看出这个页面的布局。
			当然稍微需要一点学习成本，比如pt-16意思是padding-top: 16px。
	其次，这些命名本身是极其讲究的，当你习惯之后，你会很容易记住。比如，py-3和justify-center，并不是说越短越好，关键是好记。相比之下，像Bootstrap这种col-xs-offset-3，总是要想一想的。

	~~除了使用Tailwind CSS来作为基础样式库之外，它跟一些UI框架的结合也是十分到位的。~~		或许，这才是真正的HTML和CSS分离——我们不需要记住CSS的很多语法，取而代之，只需要知道要怎么使用。

	~~比如，使用Next UI和Tailwind CSS可以很容易实现响应式布局：~~

	~~<syntaxhighlight lang="html">~~
	~~<NavbarContent~~
	~~className="hidden sm:flex basis-1/5 sm:basis-full"~~
	~~justify="end"~~
	>
	~~<NavbarItem className="hidden sm:flex gap-2">~~
	~~<ThemeSwitch />~~
	~~</NavbarItem>~~
	~~<NavbarItem className="hidden sm:flex">~~
	~~<UserInfo />~~
	~~</NavbarItem>~~
	~~</NavbarContent>~~
	~~</syntaxhighlight>~~

	<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>		<ref>https://adamwathan.me/css-utility-classes-and-separation-of-concerns/</ref>

	[[Category:Hacker Radar]]		[[Category:Hacker Radar]]

Tailwind CSS - 版本历史

Riguz：​/* Tailwind CSS恐惧症 */

Riguz：​/* 要不要“Semantic” CSS？ */

Riguz：​/* 样式的复用：组合还是继承？ */

Riguz：​/* 要不要“Semantic” CSS？ */

Riguz：​/* Tailwind CSS体验 */

Riguz：​/* Tailwind CSS体验 */

Riguz：​/* 样式的复用：组合还是继承？ */

Riguz：​/* Tailwind CSS体验 */

Riguz：​/* Tailwind CSS体验 */

Riguz：​/* 样式的复用 */

Riguz：/* Tailwind CSS恐惧症 */

Riguz：/* 要不要“Semantic” CSS？ */

Riguz：/* 样式的复用：组合还是继承？ */

Riguz：/* 要不要“Semantic” CSS？ */

Riguz：/* Tailwind CSS体验 */

Riguz：/* Tailwind CSS体验 */

Riguz：/* 样式的复用：组合还是继承？ */

Riguz：/* Tailwind CSS体验 */

Riguz：/* Tailwind CSS体验 */

Riguz：/* 样式的复用 */