>Zina в 06:37, 24 січня 2023

2023-01-24T06:37:54Z

Нова сторінка

* [https://gist.github.com/sandren/0f22e116f01611beab2b1195ab731b63 Tailwind CSS best practices]
* [https://blog.logrocket.com/10-tailwind-css-tips-to-boost-your-productivity/ 10 Tailwind CSS tips to boost your productivity]

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

Можо ориентироваться на порядок, в соответствии с которым автоматически сортирует классы плагин Visual Studio Code [https://github.com/heybourn/headwind 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

Tailwind Best Practices - Історія редагувань

>Zina в 06:37, 24 січня 2023