{"id":"R_kgDOKDznUg","stargazerCount":3,"updatedAt":"2024-08-02T18:33:27Z","homepageUrl":"","openGraphImageUrl":"https://opengraph.githubassets.com/a5d0b16aab9e5d393ca2f93fe625f5a4183e03b681ed41d5c752e5753c7b9e3e/jaskang/unocss-preset-tailwindcss","description":"A unocss preset that aligns with the official features of Tailwind, emphasizing consistency.","descriptionHTML":"

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

","forkCount":0,"url":"https://github.com/jaskang/unocss-preset-tailwindcss","nameWithOwner":"jaskang/unocss-preset-tailwindcss","name":"unocss-preset-tailwindcss","readme1":{"text":"# unocss-preset-tailwindcss (WIP)\n\nA unocss preset that aligns with Tailwind CSS.\n\nAims to provide a seamless transition for Tailwind users to unocss-preset-tailwindcss.\n\nSwitch language: [English](./README.md) | [中文](./README.zh-CN.md)\n\n## Why\n\nunocss 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.\n\nTailwind includes a set of very high design standards, which ensures that my pages look good even without a designer's involvement.\n\nI want developers to focus only on Tailwind's official documentation while enjoying the excellent experience provided by unocss.\n\nFor example:\n\n> In `preset-wind`, `m` and `m-` are the same, and `` can have any value. In `Tailwind`, there are fixed specifications, and only `m-[5px]` is considered a user-defined value.\n\n```html\n\n

\n\n\n```\n\n## Progress\n\n### Base Styles\n\n- [] Preflight\n\n### Layout\n\n- [x] Aspect Ratio\n- [x] Container\n- [x] Columns\n- [x] Break After\n- [x] Break Before\n- [x] Break Inside\n- [x] Box Decoration Break\n- [x] Box Sizing\n- [x] Display\n- [x] Floats\n- [x] Clear\n- [x] Isolation\n- [x] Object Fit\n- [x] Object Position\n- [x] Overflow\n- [x] Overscroll Behavior\n- [x] Position\n- [x] Top / Right / Bottom / Left\n- [x] Visibility\n- [x] Z-Index\n\n### Flexbox & Grid\n\n- [x] Flex Basis\n- [x] Flex Direction\n- [x] Flex Wrap\n- [x] Flex\n- [x] Flex Grow\n- [x] Flex Shrink\n- [x] Order\n- [x] Grid Template Columns\n- [x] Grid Column Start / End\n- [x] Grid Template Rows\n- [x] Grid Row Start / End\n- [x] Grid Auto Flow\n- [x] Grid Auto Columns\n- [x] Grid Auto Rows\n- [x] Gap\n- [x] Justify Content\n- [x] Justify Items\n- [x] Justify Self\n- [x] Align Content\n- [x] Align Items\n- [x] Align Self\n- [x] Place Content\n- [x] Place Items\n- [x] Place Self\n\n### Spacing\n\n- [x] Padding\n- [x] Margin\n- [x] Space Between\n\n### Sizing\n\n- [x] Width\n- [x] Min-Width\n- [x] Max-Width\n- [x] Height\n- [x] Min-Height\n- [x] Max-Height\n\n### Typography\n\n- [x] Font Family\n- [x] Font Size\n- [x] Font Smoothing\n- [x] Font Style\n- [x] Font Weight\n- [x] Font Variant Numeric\n- [x] Letter Spacing\n- [x] Line Clamp\n- [x] Line Height\n- [x] List Style Image\n- [x] List Style Position\n- [x] List Style Type\n- [x] Text Align\n- [] Text Color\n- [] Text Decoration\n- [] Text Decoration Color\n- [] Text Decoration Style\n- [] Text Decoration Thickness\n- [] Text Underline Offset\n- [] Text Transform\n- [] Text Overflow\n- [] Text Indent\n- [] Vertical Align\n- [] Whitespace\n- [] Word Break\n- [] Hyphens\n- [] Content\n\n### Backgrounds\n\n- [] Background Attachment\n- [] Background Clip\n- [] Background Color\n- [] Background Origin\n- [] Background Position\n- [] Background Repeat\n- [] Background Size\n- [] Background Image\n- [] Gradient Color Stops\n\n### Borders\n\n- [] Border Radius\n- [] Border Width\n- [] Border Color\n- [] Border Style\n- [] Divide Width\n- [] Divide Color\n- [] Divide Style\n- [] Outline Width\n- [] Outline Color\n- [] Outline Style\n- [] Outline Offset\n- [] Ring Width\n- [] Ring Color\n- [] Ring Offset Width\n- [] Ring Offset Color\n\n### Effects\n\n- [] Box Shadow\n- [] Box Shadow Color\n- [] Opacity\n- [] Mix Blend Mode\n- [] Background Blend Mode\n\n### Filters\n\n- [] Blur\n- [] Brightness\n- [] Contrast\n- [] Drop Shadow\n- [] Grayscale\n- [] Hue Rotate\n- [] Invert\n- [] Saturate\n- [] Sepia\n- [] Backdrop Blur\n- [] Backdrop Brightness\n- [] Backdrop Contrast\n- [] Backdrop Grayscale\n- [] Backdrop Hue Rotate\n- [] Backdrop Invert\n- [] Backdrop Opacity\n- [] Backdrop Saturate\n- [] Backdrop Sepia\n\n### Tables\n\n- [] Border Collapse\n- [] Border Spacing\n- [] Table Layout\n- [] Caption Side\n\n### Transitions & Animation\n\n- [] Transition Property\n- [] Transition Duration\n- [] Transition Timing Function\n- [] Transition Delay\n- [] Animation\n\n### Transforms\n\n- [] Scale\n- [] Rotate\n- [] Translate\n- [] Skew\n- [] Transform Origin\n\n### Interactivity\n\n- [] Accent Color\n- [] Appearance\n- [] Cursor\n- [] Caret Color\n- [] Pointer Events\n- [] Resize\n- [] Scroll Behavior\n- [] Scroll Margin\n- [] Scroll Padding\n- [] Scroll Snap Align\n- [] Scroll Snap Stop\n- [] Scroll Snap Type\n- [] Touch Action\n- [] User Select\n- [] Will Change\n\n### SVG\n\n- [] Fill\n- [] Stroke\n- [] Stroke Width\n\n### Accessibility\n\n- [] Screen Readers\n\n### Official Plugins\n\n- [] Typography\n- [] Forms\n- [] Aspect Ratio\n- [] Container Queries\n"},"readme2":null,"readme3":null,"readme4":null,"readme5":null,"repositoryTopics":{"nodes":[{"topic":{"name":"tailwind"}},{"topic":{"name":"tailwindcss"}},{"topic":{"name":"unocss"}},{"topic":{"name":"preset"}},{"topic":{"name":"vite"}}]},"owner":{"avatarUrl":"https://avatars.githubusercontent.com/u/5652594?s=30&u=9fe51d9887f83b5d66f5885be1f788de049542ca&v=4","url":"https://github.com/jaskang","login":"jaskang"},"htmlContent":"

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:

\n
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.
\n

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

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

\n"}

Unocss Preset Tailwindcss