unocss-preset-tailwindcss (WIP)

A unocss preset that aligns with the official features of Tailwind, emphasizing consistency.

The goal is to seamlessly switch projects using Tailwind to unocss-preset-tailwindcss.

check out : English | 中文

Why

Tailwind encompasses a set of highly standardized design specifications that I can't live without after using it. However, it lacks speed and feels a bit cumbersome.

Unocss, on the other hand, is fast and integrates better with the frontend toolchain. However, the official preset-wind doesn't strictly adhere to Tailwind's rules; it's a mishmash that feels quite loose.

I want developers to be able to focus on Tailwind's official documentation while enjoying the advantages of unocss.

Progress

Base Styles

• [] Preflight

Layout

• [x] Aspect Ratio
• [x] Container
• [x] Columns
• [x] Break After
• [x] Break Before
• [x] Break Inside
• [x] Box Decoration Break
• [x] Box Sizing
• [x] Display
• [x] Floats
• [x] Clear
• [x] Isolation
• [x] Object Fit
• [x] Object Position
• [x] Overflow
• [x] Overscroll Behavior
• [x] Position
• [x] Top / Right / Bottom / Left
• [x] Visibility
• [x] Z-Index

Flexbox & Grid

• [x] Flex Basis
• [x] Flex Direction
• [x] Flex Wrap
• [x] Flex
• [x] Flex Grow
• [x] Flex Shrink
• [] Order
• [] Grid Template Columns
• [] Grid Column Start / End
• [] Grid Template Rows
• [] Grid Row Start / End
• [] Grid Auto Flow
• [] Grid Auto Columns
• [] Grid Auto Rows
• [] Gap
• [] Justify Content
• [] Justify Items
• [] Justify Self
• [] Align Content
• [] Align Items
• [] Align Self
• [] Place Content
• [] Place Items
• [] Place Self

Spacing

• [] Padding
• [] Margin
• [] Space Between

Sizing

• [] Width
• [] Min-Width
• [] Max-Width
• [] Height
• [] Min-Height
• [] Max-Height

Typography

• [] Font Family
• [] Font Size
• [] Font Smoothing
• [] Font Style
• [] Font Weight
• [] Font Variant Numeric
• [] Letter Spacing
• [] Line Clamp
• [] Line Height
• [] List Style Image
• [] List Style Position
• [] List Style Type
• [] Text Align
• [] Text Color
• [] Text Decoration
• [] Text Decoration Color
• [] Text Decoration Style
• [] Text Decoration Thickness
• [] Text Underline Offset
• [] Text Transform
• [] Text Overflow
• [] Text Indent
• [] Vertical Align
• [] Whitespace
• [] Word Break
• [] Hyphens
• [] Content

Backgrounds

• [] Background Attachment
• [] Background Clip
• [] Background Color
• [] Background Origin
• [] Background Position
• [] Background Repeat
• [] Background Size
• [] Background Image
• [] Gradient Color Stops

Borders

• [] Border Radius
• [] Border Width
• [] Border Color
• [] Border Style
• [] Divide Width
• [] Divide Color
• [] Divide Style
• [] Outline Width
• [] Outline Color
• [] Outline Style
• [] Outline Offset
• [] Ring Width
• [] Ring Color
• [] Ring Offset Width
• [] Ring Offset Color

Effects

• [] Box Shadow
• [] Box Shadow Color
• [] Opacity
• [] Mix Blend Mode
• [] Background Blend Mode

Filters

• [] Blur
• [] Brightness
• [] Contrast
• [] Drop Shadow
• [] Grayscale
• [] Hue Rotate
• [] Invert
• [] Saturate
• [] Sepia
• [] Backdrop Blur
• [] Backdrop Brightness
• [] Backdrop Contrast
• [] Backdrop Grayscale
• [] Backdrop Hue Rotate
• [] Backdrop Invert
• [] Backdrop Opacity
• [] Backdrop Saturate
• [] Backdrop Sepia

Tables

• [] Border Collapse
• [] Border Spacing
• [] Table Layout
• [] Caption Side

Transitions & Animation

• [] Transition Property
• [] Transition Duration
• [] Transition Timing Function
• [] Transition Delay
• [] Animation

Transforms

• [] Scale
• [] Rotate
• [] Translate
• [] Skew
• [] Transform Origin

Interactivity

• [] Accent Color
• [] Appearance
• [] Cursor
• [] Caret Color
• [] Pointer Events
• [] Resize
• [] Scroll Behavior
• [] Scroll Margin
• [] Scroll Padding
• [] Scroll Snap Align
• [] Scroll Snap Stop
• [] Scroll Snap Type
• [] Touch Action
• [] User Select
• [] Will Change

SVG

• [] Fill
• [] Stroke
• [] Stroke Width

Accessibility

• [] Screen Readers

Official Plugins

• [] Typography
• [] Forms
• [] Aspect Ratio
• [] Container Queries