Responsive Design
UnoCSS มี breakpoints ที่ช่วยให้เราสามารถสร้าง responsive design ได้ง่ายขึ้น โดยใช้ prefix ต่างๆ เช่น sm:, md:, lg:, xl: และ 2xl:
Default Breakpoints
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
การใช้งาน
html
<div class="
text-center <!-- ทุก breakpoint -->
sm:text-left <!-- >= 640px -->
md:text-right <!-- >= 768px -->
lg:text-center <!-- >= 1024px -->
">
Responsive Text
</div>Dark Mode
สามารถใช้ dark: prefix เพื่อกําหนดสไตล์สําหรับ dark mode:
html
<div class="text-black dark:text-white bg-white dark:bg-black">
Dark Mode Support
</div>Hover States
ใช้ hover: prefix เพื่อกําหนดสไตล์เมื่อ hover:
html
<button class="bg-blue-500 hover:bg-blue-700">
Hover Me
</button>