UnoCSS Presets

UnoCSS Presets คือชุดกฎและการตั้งค่าสําเร็จรูปที่ช่วยให้เราสามารถใช้งาน UnoCSS ได้ง่ายขึ้น โดยแต่ละ preset จะมีจุดเด่นและการใช้งานที่แตกต่างกันไป

Preset	คําอธิบาย
@unocss/preset-uno	Preset พื้นฐานที่รวมคุณสมบัติจาก Tailwind, Windi CSS และ Bootstrap
@unocss/preset-wind	Preset ที่เข้ากันได้กับ Tailwind CSS ใช้การตั้งชื่อคล้ายกัน
@unocss/preset-mini	Preset ขนาดเล็กที่มีเฉพาะคุณสมบัติพื้นฐานที่จําเป็น
@unocss/preset-attributify	ช่วยให้สามารถใช้ utility classes ในรูปแบบ attributes ได้
@unocss/preset-tagify	ช่วยให้สามารถใช้ utility classes ในรูปแบบ HTML tags ได้
@unocss/preset-icons	เพิ่มการใช้งานไอคอนกว่า 100,000 แบบ แบบ on-demand
@unocss/preset-web-fonts	รองรับการใช้งาน Web Fonts และ Google Fonts
@unocss/preset-typography	เพิ่ม utilities สําหรับจัดการ typography
@unocss/preset-rem-to-px	แปลงหน่วย rem เป็น px อัตโนมัติ

@unocss/preset-uno

Default preset combining most common features from Tailwind, Windi CSS, and Bootstrap.

uno.config.ts

import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
	presets: [
		presetUno()
	]
})

@unocss/preset-wind

Tailwind CSS compatible preset with similar naming conventions.

uno.config.ts

import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({
	presets: [
		presetWind()
	]
})

@unocss/preset-mini

Minimal but essential rules providing core utilities only.

uno.config.ts

import { defineConfig } from 'unocss'
import presetMini from '@unocss/preset-mini'

export default defineConfig({
	presets: [
		presetMini()
	]
})

@unocss/preset-attributify

Enables attributify mode for using utilities as attributes.

App.vue

<button 
	bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
	text="sm white"
	font="mono light"
	p="y-2 x-4"
	border="2 rounded blue-200"
>
	Button
</button>

@unocss/preset-tagify

Enables tagify mode for using utilities as HTML tags.

App.vue

<bg-blue-500>
	<text-white>
		<p-4>
			Hello World
		</p-4>
	</text-white>
</bg-blue-500>

@unocss/preset-icons

Access to over 100,000 icons with on-demand loading.

App.vue

<span class="i-carbon-sun dark:i-carbon-moon"/>
<span class="i-logos-vue text-3xl"/>

@unocss/preset-web-fonts

Web fonts support with Google Fonts integration.

uno.config.ts

import { defineConfig } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts'

export default defineConfig({
	presets: [
		presetWebFonts({
			provider: 'google',
			fonts: {
				sans: 'Roboto',
				mono: ['Fira Code', 'Fira Mono:400,700'],
			}
		})
	]
})

@unocss/preset-typography

Typography utilities for rich text styling.

App.vue

<article class="prose prose-sm">
	<h1>Title</h1>
	<p>Paragraph content...</p>
</article>

@unocss/preset-rem-to-px

Converts rem to px automatically with configurable ratio.

uno.config.ts

import { defineConfig } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
	presets: [
		presetRemToPx({
			baseFontSize: 16
		})
	]
})