modern frontend
[toc]
做了一些前端内容,在这里存放一些记录。
由于个人笔记常用的是obsidian+云同步,所以图片在粘贴到typora时需要手动贴图床粘过来,可能会有遗漏。
前言
最近在写tailwind+typescript+next.js的组合,老实说发现现代前端甚至连html都不用写了的时候,是非常惊讶的
tailwind更是,虽然被人诟病导致代码变长变宽,但所见即所得的方式让我这种markdown爱好者非常喜欢,也不用像以前那样去手搓一堆一堆的css
组件
tips and tricks
这个fluid texts非常他妈的好看,很细腻的响应式文字
1
2
3<!--Fluid Texts-->
<p class="text-[min(10vw,70px)]">Something Fluid</p>
<!--F1le-->accent(改变例如checkbox之类老html元素的颜色等
1
2
3
4
5<!--Accent -->
<div class="my-4 flex flex-col text-white ml-2">
<label><input type="checkbox"checked /Browser default </label>
<label><input type="checkbox"class="accent-pink-500"checked /Customized label>
</div>
1 | from xxx import xxx |
文件上传按钮,在class里输入file即可
1
2
3
4
5<!--File-->
<label class="my-4 block">
<input type="file" class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2
file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100" >
</label>选中高亮
1
2
3
<!--Highlight -->
<div class="selection:bg-green-400 selection:text-white">less js/ts,一些extra。直接在tailwintailwind网站上cmd+k搜索
其他
组件
在app结构下,创建(components)的文件夹,然后这个目录不会被读到
里面可以放很多不同组件,调用的时候使用
⬇️import XXXX from 组件目录
1 | import Navbar from '../(components)/nav'; |
并在html里用的地方调用
1 | <Navbar /> |
directives提示
base components utilities结构
base(全局元素应用样式
components(组件,header、footer、card等等
utilities(原子样式,给margin、padding等小件用
utilities
components
utilities
utilities
components
utilities
utilities
@layer
需要和@apply组合使用
@layer base 基础组件,p,h1之类
@layer components 自定义名字的卡片之类的,用的时候直接放到classname里
layer例子
1 | components{ |
使用时只需要
1 | <div className = 'card'>card text</div> |
@utility
定义一个专门的样式,这样在组件class调用的时候会用的比较方便
utilities
有些未定义的css,可以用[]的形式写明
例如 text-[10px]
Utility Class | Options/Values | Description |
---|---|---|
bg-{color} |
slate-50 to slate-900 , black , white , transparent , current |
设置背景颜色 |
text-{color} |
slate-50 to slate-900 , black , white , transparent , current |
设置文本颜色 |
font-{weight} |
thin , extralight , light , normal , medium , semibold , bold , extrabold , black |
设置字体粗细 |
text-{size} |
xs , sm , base , lg , xl , 2xl to 9xl |
设置字体大小 |
p-{size} |
0 to 96 , px (1px) |
设置内边距(padding) |
m-{size} |
0 to 96 , px (1px), auto |
设置外边距(margin) |
w-{size} |
0 to 96 , px , auto , full , screen , min , max , fit |
设置宽度 |
h-{size} |
0 to 96 , px , auto , full , screen , min , max , fit |
设置高度 |
rounded-{size} |
none , sm , md , lg , xl , 2xl , 3xl , full |
设置圆角 |
border-{size} |
0 , 2 , 4 , 8 |
设置边框宽度 |
shadow-{size} |
sm , md , lg , xl , 2xl , none |
设置阴影 |
flex |
row , row-reverse , col , col-reverse |
设置 Flex 布局 |
justify-{position} |
start , end , center , between , around , evenly |
设置 Flex 主轴对齐 |
items-{position} |
start , end , center , baseline , stretch |
设置 Flex 交叉轴对齐 |
grid |
cols-1 to cols-12 , rows-1 to rows-6 |
设置 Grid 布局 |
gap-{size} |
0 to 96 , px |
设置 Grid/Flex 间距 |
hidden / block |
inline , inline-block , flex , grid , none |
控制显示/隐藏 |
opacity-{value} |
0 to 100 |
设置透明度 |
transition |
none , all , colors , opacity , shadow , transform |
设置过渡效果 |
duration-{time} |
75 , 100 , 150 , 200 , 300 , 500 , 700 , 1000 (ms) |
设置过渡时间 |
hover: , focus: , active: |
所有工具类前加前缀 | 设置伪类状态 |
dark: |
所有工具类前加前缀 | 暗黑模式样式 |
md: , lg: , xl: |
所有工具类前加前缀 | 响应式断点 |
animate-{type} |
spin , ping , pulse , bounce |
设置动画效果 |
z-{index} |
0 to 50 , auto |
设置 z-index |
overflow-{type} |
auto , hidden , visible , scroll |
设置溢出行为 |
cursor-{type} |
auto , default , pointer , wait , text , move , not-allowed |
设置鼠标指针样式 |
select-{type} |
none , text , all , auto |
设置文本选择行为 |
whitespace-{type} |
normal , nowrap , pre , pre-line , pre-wrap , break-spaces |
设置空白处理方式 |
break-{type} |
normal , words , all , keep |
设置文本换行行为 |
object-{type} |
contain , cover , fill , none , scale-down |
设置图片填充方式 |
aspect-{ratio} |
auto , square , video |
设置宽高比 |
margin/padding
margin不只有margintop(mt-4)之类,还可以写成my-4,意思是上+下。同理mx-4是左右
什么都不加直接m-4,代表所有面
margin控制div的大小,并且会推开其他div
padding则会向内推,把组件变小
layout
工具类 | 控制的轴 | 作用范围 | 典型使用场景 |
---|---|---|---|
flex |
- | 容器级 | 启用 Flexbox 布局 |
justify-center |
主轴 | 子元素在主轴的对齐 | 水平居中(默认主轴为水平方向) |
items-center |
交叉轴 | 子元素在交叉轴对齐 | 垂直居中(默认交叉轴为垂直方向) |
position
- absolute
- relative
- fixed (sticks on front doesnt scroll)
- sticky (behave normally before scroll to certern point)
display
property
- flex
- justify
- start
- end
- evenly(比较喜欢这个)
- space
- ![[Screenshot 2025-03-29 at 16.45.38.png]]
- flex-col 垂直flex
- justify
- grid 网格布局,会自动铺满
- grid-cols
flexbox
响应式
移动端优先原则
把utilities当作断点,而不是情况
也就是说在未指定大小情况下,默认是给移动端用的
sm 代表small以及small以上
md
lg