随笔分类 - CSS3
摘要：postcss-cli和配置文件 postcss-cli 配置文件 postcss-cli cli 是一组单词的缩写（command line interface），为你提供了一组在命令行中可以操作的命令来进行处理。 postcss-cli 通过给我们提供一些命令行的命令来简化 postcss 的使
阅读全文
摘要：4.0更新说明 https://tailwindcss.com/blog/tailwindcss-v4 简化安装 v3安装步骤：https://v3.tailwindcss.com/docs/guides/vite#vue v4安装步骤：https://tailwindcss.com/docs/in
阅读全文
摘要：在 Tailwindcss 里面包含了大量的原子类，但是在实际开发中，我们并不是说所有的原子类都会用到，因此在最终构建 css 的时候我们应该将没有使用到的原子类进行删除操作，从而优化我们的构建产物。 tree shaking 这里在 tailwindcss 里面要进行 tree shaking 操
阅读全文
摘要：在 tailwindcss 里面，要开启夜间模式，非常非常简单，只需要使用 dark: 变体即可，dark: 后面跟上原子类，表示夜间模式下面需要应用的原子类。 例如： <body class="bg-gray-100 dark:bg-gray-900"></body> 在上面的代码中，如果是白天模
阅读全文
摘要：## 响应式断点 *Tailwind CSS* 默认提供了一组预设的断点，即屏幕尺寸范围，用于管理响应式样式。默认的断点包括： - *sm*: *640px* 及以上- *md*: *768px* 及以上- *lg*: *1024px* 及以上- *xl*: *1280px* 及以上- *2xl*:
阅读全文
摘要：在前面的学习中，我们发现很多时候一些标签所应用的原子类是一样的。例如： <div class="float-left text-center flex items-center bg-blue-100 block"></div> <div class="float-left text-center
阅读全文
摘要：TailwindCSS中是允许我们自定义插件和组件的。需要注意一下两者之间的区别，插件一般指的是实现某一个具体的功能，组件一般是指封装了一段公共的代码。 自定义插件 要创建一个自定义插件，非常的简单，只需要在 tailwindcss 的配置文件中配置 plugins 配置项，该配置项对应的是一个数组
阅读全文
摘要：自定义主题 在开始本小节的实战之前，我们先来介绍一下 Tailwind CSS 中如何自定义主题。 在 Tailwind CSS 中，虽然提供了大量预设样式，但有时您可能需要自定义样式以满足特定需求。Tailwind 提供了多种方法来自定义样式，包括扩展现有配置、添加新配置、编写自定义 CSS 和创
阅读全文
摘要：@use 'sass:math'; @use 'sass:string'; html { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100%; width: 100%; over
阅读全文
摘要：PreProcessor Using Scss Install: pnpm add sass -D Code: // filename: src/views/404.vue <template> <div title="404">404</div> <p>Page Not Found</p> </t
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Animation for auto height</title> <style> .btn { position: relative; border: no
阅读全文
摘要：预处理器介绍 预处理器基本介绍 Sass 快速入门 预处理器基本介绍 平时在工作的时候，经常会面临这样的情况：需要书写很多的样式代码，特别是面对比较大的项目的时候，代码量会急剧提升，普通的CSS书写方式不方便维护以及扩展还有复用。 通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言，
阅读全文
摘要：In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We'
阅读全文
摘要：Identifying the containing block The process for identifying the containing block depends entirely on the value of the element's position property: If
阅读全文
摘要：/* initial: default value of the css property, you don't need to remember what's the default value of each css property, just use initial should do th
阅读全文
摘要：https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Houdini</title> <
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>CSS avatar scale</title> <style> .avatar { width: 150px; height: 150px; backgro
阅读全文
摘要：@use 'sass:math'; .menu-item { opacity: 0; transition: 0.5s; } $r: 120px; $n: 6; $step: 360deg / $n; for $i from 1 through $n { .board:hover .menu-ite
阅读全文
摘要：<style> dt { position: sticky; top: 0; } </style> <body> <dl> <dt>A</dt> <dd>Adrew W.K</dd> <dd>Adapter</dd> <dt>B</dt> <dd>Border</dd> <dd>Beef</dd>
阅读全文
摘要：$breakpoints: ( 'phone': (320px, 480px), 'pad': (481px, 768px), 'notebook': (769px, 1024px), 'desktop': (1025px, 1200px), 'tv': 1201px, ) @mixin respo
阅读全文
浙公网安备 33010602011771号