TailsJS Plugin Test Suite

Testing all plugins and utilities in organized sections

🎨 Colors Plugin

Background Colors

bg-red-500
bg-blue-500
bg-green-500
bg-yellow-500
bg-purple-500
bg-pink-500
bg-gray-500
bg-indigo-500

Text Colors

text-red-600

text-blue-600

text-green-600

text-purple-600

text-yellow-600

text-pink-600

text-indigo-600

text-cyan-600

text-teal-600

text-gray-600

text-black

text-white

Color Shades (Blue Example)

bg-blue-50
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900

📐 Layout Plugin

Display Types

block
inline
inline-block
flex-item
flex-item

Positioning

absolute
relative
fixed

Visibility

visible

Z-Index

z-10
z-20

📏 Spacing Plugin

Padding

p-2
p-4
p-8
px-4 py-2
pt-6 pb-2 px-4
pl-8 pr-2 py-3

Margin

m-2
m-4
mx-8 my-2
mt-6 mb-2 ml-4 mr-2

Space Between

Horizontal Space

Item 1
Item 2
Item 3

Vertical Space

Item 1
Item 2
Item 3

📦 Sizing Plugin

Width

w-1/4
w-1/2
w-3/4
w-full
w-32
w-64

Height

h-16
h-24
h-32
h-40

Min/Max Sizes

Min Width

min-w-32

Max Width

max-w-32 with longer text that will wrap

📝 Typography Plugin

Font Sizes

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

Font Weights

font-thin

font-light

font-normal

font-medium

font-semibold

font-bold

font-extrabold

font-black

Line Heights

leading-none

leading-tight

leading-snug

leading-normal

leading-relaxed

leading-loose

Text Alignment

text-left

text-center

text-right

text-justify

🔲 Borders Plugin

Border Widths

border-2
border-4
border-8

Border Colors

border-red-500
border-blue-500
border-green-500
border-yellow-500

Border Radius

rounded-sm
rounded
rounded-md
rounded-lg
rounded-full

🔄 Transforms Plugin

Scale

scale-75
scale-100
scale-125

Rotate

rotate-45
rotate-90
rotate-180

Translate

translate-x-4
translate-y-4

Skew

skew-x-12
skew-y-12

✨ Effects Plugin

Box Shadows

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Opacity

opacity-25
opacity-50
opacity-75
opacity-100

📐 Flexbox Plugin

Flex Direction

flex-row
flex-row-reverse
flex-col
flex-col-reverse

Justify Content

justify-start
justify-center
justify-end
justify-between
justify-around
justify-evenly

Align Items

items-start
items-center
items-end
items-stretch
items-baseline

🎯 Grid Plugin

Grid Columns

1
2
1
2
3

Grid Rows

1
2
1
2
3

Grid Spanning

col-span-2
col-span-3
row-span-2
row-span-3

🎬 Animations Plugin

Animation Types

bounce
spin
ping
pulse

Animation Durations

duration-500
duration-1000

🎨 Icons Plugin

Icon Sizes

🎨 text-xl
🎨 text-2xl
🎨 text-3xl
🎨 text-4xl

Icon Colors

🎨 text-red-500
🎨 text-blue-500
🎨 text-green-500
🎨 text-yellow-500

🧩 Components Plugin

Buttons

Cards

Card Title

This is a sample card description.

Card Title

This is another sample card description.