Toevoegen aan Chrome
← Terug naar functies
Pro

Tailwind Helper

Inspecteert elk element en genereert een gecategoriseerde uitsplitsing van Tailwind-klassen.

Toevoegen aan Chrome Toevoegen aan Edge Toevoegen aan FireFox

Terwijl Kopieer als Tailwind een snelle string geeft, is de Helper de verdiepingspartner met categorieën.

Live voorvertoning
example.com/dashboard
Click any element to inspect
Project Dashboard
Selected element
Progress: 65%
Tailwind Classes
Layout
flex flex-col items-start
Spacing
p-5 gap-3
Typography
text-sm font-semibold text-white
Background & Border
bg-slate-900 rounded-lg border border-slate-700
Copy All Classes
Belangrijkste kenmerken

Gecategoriseerde uitsplitsing

Klassen georganiseerd in Layout, Spatiëring, Typografie, Kleuren, Randen en Effecten.

Klik om te inspecteren

Klik op elk element en het paneel vult zich met klassen.

Kopieer individuele klassen

Klik op elke tag om alleen die klasse te kopiëren.

Kopieer alle klassen

De knop "Kopieer alle" genereert de volledige string.

Nauwkeurige schaalmapping

16px font wordt text-base, 24px padding wordt p-6.

Hover voor CSS-bron

Hover over een tag om de originele CSS-waarde te zien.

Wat u kunt inspecteren

Tailwind Helper covers the following, organized by category:

Layoutklassen

  • flex
  • grid
  • block
  • inline-flex
  • relative
  • absolute
  • sticky
  • items-center
  • justify-between
  • gap-*

Spatiëringsklassen

  • p-* (padding)
  • m-* (margin)
  • px-* py-*
  • mx-auto
  • space-x-*
  • w-* h-*
  • max-w-*
  • min-h-*

Typografieklassen

  • text-sm / text-base / text-lg
  • font-normal / font-bold
  • leading-* (line-height)
  • tracking-* (letter-spacing)
  • text-center
  • uppercase

Kleurklassen

  • text-{color}-{shade}
  • bg-{color}-{shade}
  • border-{color}-{shade}
  • opacity-*

Randklassen

  • border
  • border-2
  • rounded-* (radius)
  • border-solid / dashed
  • divide-*

Effectklassen

  • shadow-sm / shadow-md / shadow-lg
  • ring-*
  • transition
  • duration-*
  • hover:*
Veelvoorkomende scenario's

Volledige stijl begrijpen

De gecategoriseerde weergave toont de volledige samenstelling.

Componenten bouwen van referenties

Inspecteer en recreëer met relevante categorieklassen.

Tailwind-naamgeving leren

Hover over tags om CSS-bronwaarden te zien.

Tailwind-gebruik auditen

Controleer consistente spatiëring en kleuren.

Kopieer vs Helper vergelijken

Kopieer voor snelle string, Helper voor gedetailleerde uitsplitsing.

Hoe te gebruiken
1

Activeer

Open de dock en klik op het pictogram.

2

Klik een element

Klik op een element voor gecategoriseerde klassen.

3

Verken categorieën

Blader door categorieën om de stijlsamenstelling te begrijpen.

4

Kopieer wat u nodig heeft

Klik individuele tags of gebruik Kopieer alle.

5

Klik een ander element

Klik op een ander element om het paneel te vernieuwen.

Klaar om te proberen? Tailwind Helper?

Installeer DevSuite Pro gratis en ontgrendel 39+ ontwikkelaarstools voor uw browser.

Toevoegen aan Chrome Toevoegen aan Edge Toevoegen aan FireFox