unocss-preset-tailwindcss (WIP)

A unocss preset that aligns with Tailwind CSS.

Aims to provide a seamless transition for Tailwind users to unocss-preset-tailwindcss.

Switch language: English | 中文

Why

unocss is fast, has a great VS Code plugin, and integrates better with frontend toolchains. However, the official built-in preset-wind for unocss does not strictly follow Tailwind's rules, it's too flexible and lacks rule documentation.

Tailwind includes a set of very high design standards, which ensures that my pages look good even without a designer's involvement.

I want developers to focus only on Tailwind's official documentation while enjoying the excellent experience provided by unocss.

For example:

In preset-wind, m<num> and m-<num> are the same, and <num> can have any value. In Tailwind, there are fixed specifications, and only m-[5px] is considered a user-defined value.

<!-- unocss preset-wind -->
<div class="m-6 m5"></div>
<!-- output -->
<style>
  .m-6 {
    margin: 1.5rem;
  }
  .m5 {
    margin: 1.25rem;
  }
</style>

Progress

Base Styles

• [] Preflight

Layout

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

Flexbox & Grid

• Flex Basis
• Flex Direction
• Flex Wrap
• Flex
• Flex Grow
• 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