Tailwind Best Practices

• Tailwind CSS best practices
• 10 Tailwind CSS tips to boost your productivity

Порядок классов

Можо ориентироваться на порядок, в соответствии с которым автоматически сортирует классы плагин Visual Studio Code Headwind:

• https://github.com/heybourn/headwind/blob/master/package.json

Box model

 container
 border-box
 box-content
 block
 inline*
 flex
 inline-flex
 table*
 flow-root
 grid
 inline-grid
 contents

Position, Visibility

 hidden
 float*
 clear*
 object*
 overflow*
 overscroll*
 static
 fixed
 absolute
 relative
 sticky
 inset*
 top*
 right*
 bottom*
 left*
 visible
 invisible
 z*
 flex-*
 order-*
 grid-cols-*
 col-*
 grid-rows-*
 row-*
 grid-flow-*
 auto-*
 gap-*
 justify-*
 content-*
 items-*
 self-*
 place-*

Padding, Margin, Space, Width, Height

 p-*
 m-*
 space-*
 w-*
 min-w-*
 max-w-*
 h-*
 min-h-*
 max-h-*

Typography: Font Family, Size, Style, Tracking, Leading, List, Placeholder, Align, Color, Decoration, Whitespace, Break

 font-*
 text-*
 antialiased
 subpixel-antialiased
 italic
 tracking-*
 leading-*
 list-*
 placeholder-*
 text-left
 text-*
 text-black
 text-*
 underline
 uppercase
 lowercase
 capitalize
 normal-case
 align-*
 whitespace-*
 break-*

Background

 bg-*
 from-*
 via-*
 to-*

Border

 rounded-*
 border-*
 divide-*
 ring-*
 shadow*
 opacity-*

Animation

 transition*
 duration-*
 ease-*
 delay-*
 animate-*
 transform*
 origin-*
 scale-*
 rotate-*
 translate-*
 skew-*

Other

 appearance-none
 cursor-*
 outline-*
 pointer-events-*
 resize*
 select-*
 fill-current
 stroke-*
 sr-only
 not-sr-only