分享自用unoCSS速查表(Tailwind CSS也适用）

_志哥_
141 阅读4分钟

安装

  1. pnpm安装
pnpm add -D unocss
  1. 配置
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import UnoCSS from 'unocss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      imports: ['vue'],
      dts: "src/auto-import.d.ts"   //  会自动生成此文件
    }),
    UnoCSS(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
  1. 在根目录新建unocss的配置文件uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: [['center', 'flex justify-center items-center']],
})
  1. main.js 里引入
import 'virtual:uno.css'
  1. 完成！！

动态生成类

1. 动态生成任意CSS属性

<element class="[property]-[value]">
工具类CSS解释
w-[100px]width: 100px
h-[100px]height: 100px
bg-[#3498db]background-color: #3498db
text-[20px]font-size: 20px
border-[2px]border-width: 2px
border-[#ff0000]border-color: #ff0000

2. 动态生成伪类和伪元素

<element class="[pseudo-class]:[property]-[value]">
工具类CSS解释
hover:bg-[#ff0000]鼠标悬停时动态生成 background-color: #ff0000
focus:border-[2px]聚焦时动态生成 border-width: 2px

3. 动态生成媒体查询

<element class="[media-query]:[property]-[value]">
工具类CSS解释
md:text-[20px]在中等屏幕尺寸下动态生成 font-size: 20px
lg:text-[24px]在大屏幕尺寸下动态生成 font-size: 24px

4. 动态生成自定义属性

<element class="[property]-[var:custom-property]">
工具类CSS解释
bg-[var:primary-color]background-color: var(--primary-color)
text-[var:text-size]font-size: var(--text-size)

5. 动态生成复杂属性

<div class="shadow-[0_4px_6px_rgba(0,0,0,0.1)] transform-[rotate(45deg)]">
  Complex Properties
</div>
工具类CSS解释
shadow-[0_4px_6px_rgba(0,0,0,0.1)]box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
transform-[rotate(45deg)]transform: rotate(45deg)

6. 动态生成动画

<element class="animate-[animation-name]">

<div class="animate-[spin_2s_linear_infinite]">
  Spinning Element
</div>
工具类CSS解释
animate-[spin_2s_linear_infinite]animation: spin 2s linear infinite

7. 动态生成渐变

<div class="bg-[linear-gradient(to_right,#3498db,#9b59b6)]">
  Gradient Background
</div>
工具类CSS解释
bg-[linear-gradient(to_right,#3498db,#9b59b6)]background: linear-gradient(to right, #3498db, #9b59b6)

8. 动态生成网格和 Flexbox 布局

<div class="grid grid-cols-[repeat(3,1fr)] gap-[10px]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
工具类CSS解释
grid-cols-[repeat(3,1fr)]grid-template-columns: repeat(3, 1fr)
gap-[10px]gap: 10px

9. 动态生成过渡效果

<button class="transition-[all_0.3s_ease-in-out] hover:bg-[#ff0000]">
  Hover Me
</button>
工具类CSS解释
transition-[all_0.3s_ease-in-out]transition: all 0.3s ease-in-out

10. 动态生成滤镜

<div class="filter-[blur(5px)]">
  Blurred Element
</div>
工具类CSS解释
filter-[blur(5px)]filter: blur(5px)

工具类分类

1. 布局（Layout）

工具类CSS 解释
blockdisplay: block
inline-blockdisplay: inline-block
inlinedisplay: inline
flexdisplay: flex
inline-flexdisplay: inline-flex
griddisplay: grid
inline-griddisplay: inline-grid
hiddendisplay: none
visiblevisibility: visible
overflow-autooverflow: auto
overflow-hiddenoverflow: hidden
overflow-visibleoverflow: visible
overflow-scrolloverflow: scroll

2. 间距（Spacing）

工具类CSS 解释
m-0margin: 0
m-1margin: 0.25rem
mx-automargin-left: auto; margin-right: auto
my-2margin-top: 0.5rem; margin-bottom: 0.5rem
p-0padding: 0
p-1padding: 0.25rem
px-2padding-left: 0.5rem; padding-right: 0.5rem

3. 颜色（Colors）

工具类CSS 解释
bg-whitebackground-color: white
bg-blackbackground-color: black
bg-primarybackground-color: #3498db
text-whitecolor: white
text-blackcolor: black
text-primarycolor: #3498db
border-whiteborder-color: white
border-blackborder-color: black
border-primaryborder-color: #3498db

4. 字体（Typography）

工具类CSS 解释
text-smfont-size: 0.875rem
text-basefont-size: 1rem
text-lgfont-size: 1.125rem
text-xlfont-size: 1.25rem
font-boldfont-weight: 700
font-normalfont-weight: 400
italicfont-style: italic
text-centertext-align: center
text-lefttext-align: left
text-righttext-align: right
uppercasetext-transform: uppercase
lowercasetext-transform: lowercase
capitalizetext-transform: capitalize
text-xs0.75rem 12px 超小字体
text-sm0.875rem 14px 小字体
text-base1rem 16px 默认字体大小
text-lg1.125rem 18px 大字体
text-xl1.25rem 20px 超大字体
text-2xl1.5rem 24px 两倍超大字体

字间距

5. 边框（Borders）

工具类CSS 解释
borderborder-width: 1px; border-style: solid
border-2border-width: 2px
border-0border-width: 0
roundedborder-radius: 0.25rem
rounded-lgborder-radius: 0.5rem
rounded-fullborder-radius: 9999px
border-gray-300border-color: #d1d5db
border-primaryborder-color: #3498db

6. 定位（Positioning）

工具类CSS 解释
staticposition: static
fixedposition: fixed
absoluteposition: absolute
relativeposition: relative
stickyposition: sticky
top-0top: 0
right-0right: 0
bottom-0bottom: 0
left-0left: 0
inset-0top: 0; right: 0; bottom: 0; left: 0
z-0z-index: 0
z-10z-index: 10
z-50z-index: 50
top-1/2距离顶部 50%
left-1/2距离左侧 50%

7. 背景（Backgrounds）

工具类CSS 解释
bg-coverbackground-size: cover
bg-containbackground-size: contain
bg-centerbackground-position: center
bg-no-repeatbackground-repeat: no-repeat
bg-gradient-to-rbackground-image: linear-gradient(to right, ...)

8. 过渡与动画（Transitions & Animations）

工具类CSS 解释
transitiontransition: all 0.2s ease-in-out
transition-colorstransition: background-color 0.2s ease-in-out
animate-spinanimation: spin 2s linear infinite
transform-[translate(-50%,-50%)]transform: translate(-50%, -50%)
translate-x--1/2transform: translateX(-50%)
translate-y--1/2transform: translateY(-50%)

9. 滤镜（Filters）

工具类CSS 解释
filterfilter: ...
blur-smfilter: blur(4px)
blur-lgfilter: blur(8px)
grayscalefilter: grayscale(100%)

10. 网格（Grid）

工具类CSS 解释
griddisplay: grid
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr))
gap-2gap: 0.5rem
gap-4gap: 1rem

11. Flexbox

工具类CSS 解释
flexdisplay: flex
flex-rowflex-direction: row
flex-colflex-direction: column
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end

12. 其他（Others）

工具类CSS 解释
cursor-pointercursor: pointer
opacity-50opacity: 0.5
shadowbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
shadow-lgbox-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)
avatar
文章
阅读
粉丝