CSS Faster

Bringing the magic of Tailwind CSS design tokens to your vanilla CSS

Features

CSS Faster intuitive snippets mimics the utility classes you know and love, allowing you to quickly apply styles for padding, margins, typography, colors, and much more using your favorite TailwindCSS values – all with just a few keystrokes.

Release Notes

Currently, the list is not exhaustive, and more classes may be available or added in future updates.

0.0.1

Initial release of CSS faster

Reference

CSS Faster extension provides a comprehensive set of snippets to streamline your CSS workflow. The currently supported snippets include:

• t-0.5 to t-96: Tailwind-inspired spacing values from 0.125rem (2px) to 24rem (384px).

• xs to 9xl: Predefined spacing classes ranging from (0.75rem or 12px) to (8rem or 128px).

• All tailwindcss colors and variations, from amber-50 to zinc-950

Full list of snippets:

xs

Extra small (0.75rem or 12px)

0.75rem

sm

Small (0.875rem or 14px)

0.875rem

base

Base (1rem or 16px)

1rem

lg

Large (1.125rem or 18px)

1.125rem

xl

Extra large (1.25rem or 20px)

1.25rem

2xl

2x extra large (1.5rem or 24px)

1.5rem

3xl

3x extra large (1.875rem or 30px)

1.875rem

4xl

4x extra large (2.25rem or 36px)

2.25rem

5xl

5x extra large (3rem or 48px)

3rem

6xl

6x extra large (3.75rem or 60px)

3.75rem

7xl

7x extra large (4.5rem or 72px)

4.5rem

8xl

8x extra large (6rem or 96px)

6rem

9xl

9x extra large (8rem or 128px)

8rem

t-0.5

0.125rem (2px)

0.125rem

t-1

0.25rem (4px)

0.25rem

t-1.5

0.375rem (6px)

0.375rem

t-2

0.5rem (8px)

0.5rem

t-2.5

0.625rem (10px)

0.625rem

t-3

0.75rem (12px)

0.75rem

t-3.5

0.875rem (14px)

0.875rem

t-4

1rem (16px)

1rem

t-5

1.25rem (20px)

1.25rem

t-6

1.5rem (24px)

1.5rem

t-7

1.75rem (28px)

1.75rem

t-8-

2rem (32px)

2rem

t-9

2.25rem (36px)

2.25rem

t-10

2.5rem (40px)

2.5rem

t-11

2.75rem (44px)

2.75rem

t-12

3rem (48px)

3rem

t-14

3.5rem (56px)

3.5rem

t-16

4rem (64px)

4rem

t-20

5rem (80px)

5rem

t-24

6rem (96px)

6rem

t-28

7rem (112px)

7rem

t-32

8rem (128px)

8rem

t-36

9rem (144px)

9rem

t-40

10rem (160px)

10rem

t-44

11rem (176px)

11rem

t-48

12rem (192px)

12rem

t-52

13rem (208px)

13rem

t-56

14rem (224px)

14rem

t-60

15rem (240px)

15rem

t-64

16rem (256px)

16rem

t-72

18rem (288px)

18rem

t-80

20rem (320px)

20rem

t-96

24rem (384px)

24rem

w-full

width: 100%;

width: 100%;

h-full

height: 100%

height: 100%;

m-auto

margin: auto

margin: auto;

p-auto

padding: auto

padding: auto;

flex

display: flex

display: flex;

flex-col

flex-direction: column

flex-direction: column;

flex-row

flex-direction: row

flex-direction: row;

justify-center

justify-content: center

justify-content: center;

justify-between

justify-content: space-between

justify-content: space-between;

justify-around

justify-content: space-around

justify-content: space-aroud;

absolute

position: absolute

position: absolute;

relative

postion: relative

position: relative;

sticky

position: sticky

position: sticky;

items-center

align-items: center

align-items: center;

items-start

align-items: flex-start

align-items: flex-start;

items-end

align-items: flex-end

align-items: flex-end;

trunacate

overflow: hidden,ellipsis,nowrap

overflow: hidden;
text-overflow: ellipsis
white-space: nowrap

size

Set width and height

width: 1rem;
height: 1rem;

rounded-t-lg

Set top border radius to large

border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;

sm:

@media (min-width: 640px)

@media (min-width: 640px) {
${0

md:

@media (min-width: 768px)

@media (min-width: 768px) {
${0

lg:

@media (min-width: 1024px)

@media (min-width: 1024px) {
${0

xl:

@media (min-width: 1280px)

@media (min-width: 1280px) {
${0

shadow

box-shadow:..;

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

center-flex

flex,items-center,justify-center

display: flex;
justify-content: center;
align-items: center;

center-grid

grid,place-content-center

display: grid;
place-content: center;

flex-wrap

Control flex-wrap behavior

flex-wrap: ${1|wrap,nowrap,wrap-reverse|;

content-around

Align flex lines with space around

align-content: space-around;

grid-cols-4

Define 4 grid columns

grid-template-columns: repeat(4, minmax(0, 1fr));

grid-rows-4

Define 4 grid rows

grid-template-rows: repeat(4, minmax(0, 1fr));

place-items-stretch

Stretch items to fill the container

place-items: stretch;

font-bold

Set font weight to bold

font-weight: 700;

text-center

Align text to the center

text-align: center;

transition

Define transitions for properties

transition: all 0.3s ease;

translate-y-2

Translate an element along the Y-axis

transform: translateY(0.5rem);

scale-150

Scale an element to 150%

transform: scale(1.5);

border-4

Add a 4px border

border-width: 4px;
border-style: solid;

border-white

Set border color to white

border-color: #fff;

opacity-100

Set opacity to 100% (fully visible)

opacity: 1;

shadow-2xl

2x extra large box shadow

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

text-green-500

Set text color to green-500

color: #22c55e;

bg-green-100

Set background color to green-100

background-color: #dcfce7;

cursor-not-allowed

Set cursor to not-allowed

cursor: not-allowed;

outline-blue-500

Add a blue-500 outline

outline: 2px solid #3b82f6;

resize

Allow resizing in both directions

resize: both;

select-all

Select all text by default

user-select: all;

appearance-none

Remove native styling

appearance: none;

pointer-events-auto

Enable pointer events

pointer-events: auto;

font-mono

Set font family to monospace

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

text-2xl

Set font size to 2x extra large

font-size: 1.5rem;

leading-loose

Set line height to loose

line-height: 2;

tracking-widest

Set letter spacing to widest

letter-spacing: 0.1em;

my-4

Set top and bottom margins to 1rem

margin-top: 1rem;
margin-bottom: 1rem;

py-6

Set top and bottom padding to 1.5rem

padding-top: 1.5rem;
padding-bottom: 1.5rem;

border-l

Add a left border

border-left-width: 1px;
border-left-style: solid;

hidden

Hide an element

display: none;

slate-50

Color to slate-50

#f8fafc

slate-100

Color to slate-100

#f1f5f9

slate-200

Color to slate-200

#e2e8f0

slate-300

Color to slate-300

#cbd5e1

slate-400

Color to slate-400

#94a3b8

slate-500

Color to slate-500

#64748b

slate-600

Color to slate-600

[#475569](https://github.com/Abdulmumin1/css-faster/issues/475569)

slate-700

Color to slate-700

[#334155](https://github.com/Abdulmumin1/css-faster/issues/334155)

slate-800

Color to slate-800

#1e293b

slate-900

Color to slate-900

#0f172a

slate-950

Color to slate-950

[#020617](https://github.com/Abdulmumin1/css-faster/issues/020617)

gray-50

Color to gray-50

#f9fafb

gray-100

Color to gray-100

#f3f4f6

gray-200

Color to gray-200

#e5e7eb

gray-300

Color to gray-300

#d1d5db

gray-400

Color to gray-400

#9ca3af

gray-500

Color to gray-500

#6b7280

gray-600

Color to gray-600

#4b5563

gray-700

Color to gray-700

[#374151](https://github.com/Abdulmumin1/css-faster/issues/374151)

gray-800

Color to gray-800

#1f2937

gray-900

Color to gray-900

[#111827](https://github.com/Abdulmumin1/css-faster/issues/111827)

gray-950

Color to gray-950

[#030712](https://github.com/Abdulmumin1/css-faster/issues/030712)

zinc-50

Color to zinc-50

#fafafa

zinc-100

Color to zinc-100

#f4f4f5

zinc-200

Color to zinc-200

#e4e4e7

zinc-300

Color to zinc-300

#d4d4d8

zinc-400

Color to zinc-400

#a1a1aa

zinc-500

Color to zinc-500

#71717a

zinc-600

Color to zinc-600

#52525b

zinc-700

Color to zinc-700

#3f3f46

zinc-800

Color to zinc-800

#27272a

zinc-900

Color to zinc-900

#18181b

zinc-950

Color to zinc-950

#09090b

neutral-50

Color to neutral-50

#fafafa

neutral-100

Color to neutral-100

#f5f5f5

neutral-200

Color to neutral-200

#e5e5e5

neutral-300

Color to neutral-300

#d4d4d4

neutral-400

Color to neutral-400

#a3a3a3

neutral-500

Color to neutral-500

[#737373](https://github.com/Abdulmumin1/css-faster/issues/737373)

neutral-600

Color to neutral-600

[#525252](https://github.com/Abdulmumin1/css-faster/issues/525252)

neutral-700

Color to neutral-700

[#404040](https://github.com/Abdulmumin1/css-faster/issues/404040)

neutral-800

Color to neutral-800

[#262626](https://github.com/Abdulmumin1/css-faster/issues/262626)

neutral-900

Color to neutral-900

[#171717](https://github.com/Abdulmumin1/css-faster/issues/171717)

neutral-950

Color to neutral-950

#0a0a0a

stone-50

Color to stone-50

#fafaf9

stone-100

Color to stone-100

#f5f5f4

stone-200

Color to stone-200

#e7e5e4

stone-300

Color to stone-300

#d6d3d1

stone-400

Color to stone-400

#a8a29e

stone-500

Color to stone-500

#78716c

stone-600

Color to stone-600

#57534e

stone-700

Color to stone-700

#44403c

stone-800

Color to stone-800

[#292524](https://github.com/Abdulmumin1/css-faster/issues/292524)

stone-900

Color to stone-900

#1c1917

stone-950

Color to stone-950

#0c0a09

red-50

Color to red-50

#fef2f2

red-100

Color to red-100

#fee2e2

red-200

Color to red-200

#fecaca

red-300

Color to red-300

#fca5a5

red-400

Color to red-400

#f87171

red-500

Color to red-500

#ef4444

red-600

Color to red-600

#dc2626

red-700

Color to red-700

#b91c1c

red-800

Color to red-800

#991b1b

red-900

Color to red-900

#7f1d1d

red-950

Color to red-950

#450a0a

orange-50

Color to orange-50

#fff7ed

orange-100

Color to orange-100

#ffedd5

orange-200

Color to orange-200

#fed7aa

orange-300

Color to orange-300

#fdba74

orange-400

Color to orange-400

#fb923c

orange-500

Color to orange-500

#f97316

orange-600

Color to orange-600

#ea580c

orange-700

Color to orange-700

#c2410c

orange-800

Color to orange-800

#9a3412

orange-900

Color to orange-900

#7c2d12

orange-950

Color to orange-950

[#431407](https://github.com/Abdulmumin1/css-faster/issues/431407)

amber-50

Color to amber-50

#fffbeb

amber-100

Color to amber-100

#fef3c7

amber-200

Color to amber-200

#fde68a

amber-300

Color to amber-300

#fcd34d

amber-400

Color to amber-400

#fbbf24

amber-500

Color to amber-500

#f59e0b

amber-600

Color to amber-600

#d97706

amber-700

Color to amber-700

#b45309

amber-800

Color to amber-800

#92400e

amber-900

Color to amber-900

#78350f

amber-950

Color to amber-950

#451a03

yellow-50

Color to yellow-50

#fefce8

yellow-100

Color to yellow-100

#fef9c3

yellow-200

Color to yellow-200

#fef08a

yellow-300

Color to yellow-300

#fde047

yellow-400

Color to yellow-400

#facc15

yellow-500

Color to yellow-500

#eab308

yellow-600

Color to yellow-600

#ca8a04

yellow-700

Color to yellow-700

#a16207

yellow-800

Color to yellow-800

#854d0e

yellow-900

Color to yellow-900

#713f12

yellow-950

Color to yellow-950

[#422006](https://github.com/Abdulmumin1/css-faster/issues/422006)

lime-50

Color to lime-50

#f7fee7

lime-100

Color to lime-100

#ecfccb

lime-200

Color to lime-200

#d9f99d

lime-300

Color to lime-300

#bef264

lime-400

Color to lime-400

#a3e635

lime-500

Color to lime-500

#84cc16

lime-600

Color to lime-600

#65a30d

lime-700

Color to lime-700

#4d7c0f

lime-800

Color to lime-800

#3f6212

lime-900

Color to lime-900

[#365314](https://github.com/Abdulmumin1/css-faster/issues/365314)

lime-950

Color to lime-950

#1a2e05

green-50

Color to green-50

#f0fdf4

green-100

Color to green-100

#dcfce7

green-200

Color to green-200

#bbf7d0

green-300

Color to green-300

#86efac

green-400

Color to green-400

#4ade80

green-500

Color to green-500

#22c55e

green-600

Color to green-600

#16a34a

green-700

Color to green-700

#15803d

green-800

Color to green-800

[#166534](https://github.com/Abdulmumin1/css-faster/issues/166534)

green-900

Color to green-900

#14532d

green-950

Color to green-950

#052e16

emerald-50

Color to emerald-50

#ecfdf5

emerald-100

Color to emerald-100

#d1fae5

emerald-200

Color to emerald-200

#a7f3d0

emerald-300

Color to emerald-300

#6ee7b7

emerald-400

Color to emerald-400

#34d399

emerald-500

Color to emerald-500

#10b981

emerald-600

Color to emerald-600

[#059669](https://github.com/Abdulmumin1/css-faster/issues/059669)

emerald-700

Color to emerald-700

[#047857](https://github.com/Abdulmumin1/css-faster/issues/047857)

emerald-800

Color to emerald-800

#065f46

emerald-900

Color to emerald-900

#064e3b

emerald-950

Color to emerald-950

#022c22

teal-50

Color to teal-50

#f0fdfa

teal-100

Color to teal-100

#ccfbf1

teal-200

Color to teal-200

#99f6e4

teal-300

Color to teal-300

#5eead4

teal-400

Color to teal-400

#2dd4bf

teal-500

Color to teal-500

#14b8a6

teal-600

Color to teal-600

#0d9488

teal-700

Color to teal-700

#0f766e

teal-800

Color to teal-800

#115e59

teal-900

Color to teal-900

#134e4a

teal-950

Color to teal-950

#042f2e

cyan-50

Color to cyan-50

#ecfeff

cyan-100

Color to cyan-100

#cffafe

cyan-200

Color to cyan-200

#a5f3fc

cyan-300

Color to cyan-300

#67e8f9

cyan-400

Color to cyan-400

#22d3ee

cyan-500

Color to cyan-500

#06b6d4

cyan-600

Color to cyan-600

#0891b2

cyan-700

Color to cyan-700

#0e7490

cyan-800

Color to cyan-800

#155e75

cyan-900

Color to cyan-900

#164e63

cyan-950

Color to cyan-950

[#083344](https://github.com/Abdulmumin1/css-faster/issues/083344)

sky-50

Color to sky-50

#f0f9ff

sky-100

Color to sky-100

#e0f2fe

sky-200

Color to sky-200

#bae6fd

sky-300

Color to sky-300

#7dd3fc

sky-400

Color to sky-400

#38bdf8

sky-500

Color to sky-500

#0ea5e9

sky-600

Color to sky-600

#0284c7

sky-700

Color to sky-700

#0369a1

sky-800

Color to sky-800

[#075985](https://github.com/Abdulmumin1/css-faster/issues/075985)

sky-900

Color to sky-900

#0c4a6e

sky-950

Color to sky-950

#082f49

blue-50

Color to blue-50

#eff6ff

blue-100

Color to blue-100

#dbeafe

blue-200

Color to blue-200

#bfdbfe

blue-300

Color to blue-300

#93c5fd

blue-400

Color to blue-400

#60a5fa

blue-500

Color to blue-500

#3b82f6

blue-600

Color to blue-600

#2563eb

blue-700

Color to blue-700

#1d4ed8

blue-800

Color to blue-800

#1e40af

blue-900

Color to blue-900

#1e3a8a

blue-950

Color to blue-950

[#172554](https://github.com/Abdulmumin1/css-faster/issues/172554)

indigo-50

Color to indigo-50

#eef2ff

indigo-100

Color to indigo-100

#e0e7ff

indigo-200

Color to indigo-200

#c7d2fe

indigo-300

Color to indigo-300

#a5b4fc

indigo-400

Color to indigo-400

#818cf8

indigo-500

Color to indigo-500

#6366f1

indigo-600

Color to indigo-600

#4f46e5

indigo-700

Color to indigo-700

#4338ca

indigo-800

Color to indigo-800

#3730a3

indigo-900

Color to indigo-900

#312e81

indigo-950

Color to indigo-950

#1e1b4b

violet-50

Color to violet-50

#f5f3ff

violet-100

Color to violet-100

#ede9fe

violet-200

Color to violet-200

#ddd6fe

violet-300

Color to violet-300

#c4b5fd

violet-400

Color to violet-400

#a78bfa

violet-500

Color to violet-500

#8b5cf6

violet-600

Color to violet-600

#7c3aed

violet-700

Color to violet-700

#6d28d9

violet-800

Color to violet-800

#5b21b6

violet-900

Color to violet-900

#4c1d95

violet-950

Color to violet-950

#2e1065

purple-50

Color to purple-50

#faf5ff

purple-100

Color to purple-100

#f3e8ff

purple-200

Color to purple-200

#e9d5ff

purple-300

Color to purple-300

#d8b4fe

purple-400

Color to purple-400

#c084fc

purple-500

Color to purple-500

#a855f7

purple-600

Color to purple-600

#9333ea

purple-700

Color to purple-700

#7e22ce

purple-800

Color to purple-800

#6b21a8

purple-900

Color to purple-900

#581c87

purple-950

Color to purple-950

#3b0764

fuchsia-50

Color to fuchsia-50

#fdf4ff

fuchsia-100

Color to fuchsia-100

#fae8ff

fuchsia-200

Color to fuchsia-200

#f5d0fe

fuchsia-300

Color to fuchsia-300

#f0abfc

fuchsia-400

Color to fuchsia-400

#e879f9

fuchsia-500

Color to fuchsia-500

#d946ef

fuchsia-600

Color to fuchsia-600

#c026d3

fuchsia-700

Color to fuchsia-700

#a21caf

fuchsia-800

Color to fuchsia-800

#86198f

fuchsia-900

Color to fuchsia-900

#701a75

fuchsia-950

Color to fuchsia-950

#4a044e

pink-50

Color to pink-50

#fdf2f8

pink-100

Color to pink-100

#fce7f3

pink-200

Color to pink-200

#fbcfe8

pink-300

Color to pink-300

#f9a8d4

pink-400

Color to pink-400

#f472b6

pink-500

Color to pink-500

#ec4899

pink-600

Color to pink-600

#db2777

pink-700

Color to pink-700

#be185d

pink-800

Color to pink-800

#9d174d

pink-900

Color to pink-900

[#831843](https://github.com/Abdulmumin1/css-faster/issues/831843)

pink-950

Color to pink-950

[#500724](https://github.com/Abdulmumin1/css-faster/issues/500724)

rose-50

Color to rose-50

#fff1f2

rose-100

Color to rose-100

#ffe4e6

rose-200

Color to rose-200

#fecdd3

rose-300

Color to rose-300

#fda4af

rose-400

Color to rose-400

#fb7185

rose-500

Color to rose-500

#f43f5e

rose-600

Color to rose-600

#e11d48

rose-700

Color to rose-700

#be123c

rose-800

Color to rose-800

#9f1239

rose-900

Color to rose-900

[#881337](https://github.com/Abdulmumin1/css-faster/issues/881337)

rose-950

Color to rose-950

#4c0519

Enjoy!