Toevoegen aan Chrome
← Terug naar functies
Pro

Kopieer als Tailwind

Klik op elk element en krijg direct de equivalente Tailwind CSS-hulpklassen.

Toevoegen aan Chrome Toevoegen aan Edge Toevoegen aan FireFox

Tailwind Kopiëren automatiseert de vertaling van visuele stijlen naar Tailwind-klassen volledig.

Live voorvertoning
example.com/components
Right-click any element to copy Tailwind classes
Get Started
Cut
Copy
Paste
Inspect Element
Copy as Tailwind
Generated Tailwind Classes
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
✓ Copied to clipboard!
Belangrijkste kenmerken

Directe CSS-naar-Tailwind conversie

Klik en elke eigenschap wordt gemapt naar de equivalente Tailwind-klasse.

Slimme klassemapping

Begrijpt het Tailwind-designsysteem — 12px padding wordt p-3.

Kopieer naar klembord

Kopieer de gegenereerde klassenreeks met één klik.

Contextmenu-integratie

Rechtsklik voor snelle toegang.

Verwerkt complexe eigenschappen

Box-shadows, gradiënten, flex/grid-klassen en meer.

Schone, minimale output

Alleen klassen die afwijken van browserstandaarden.

Wat u kunt inspecteren

Kopieer als Tailwind covers the following, organized by category:

Layout

  • display (flex, grid, block)
  • position (relative, absolute)
  • flex-direction
  • justify-content
  • align-items
  • gap
  • overflow

Spatiëring

  • padding (p-*)
  • margin (m-*)
  • width (w-*)
  • height (h-*)
  • max-width
  • min-height

Typography

  • font-size (text-*)
  • font-weight (font-*)
  • line-height (leading-*)
  • letter-spacing (tracking-*)
  • text-align
  • text-transform

Kleuren

  • color (text-*)
  • background-color (bg-*)
  • border-color (border-*)
  • opacity

Randen

  • border-width (border-*)
  • border-radius (rounded-*)
  • border-style

Effecten

  • box-shadow (shadow-*)
  • transform (scale-*, rotate-*)
  • transition
  • cursor
Veelvoorkomende scenario's

Site migreren naar Tailwind

Klik op componenten en kopieer Tailwind-klassen als startpunt.

Designpatronen reverse-engineeren

Klik op mooie elementen en gebruik de klassen als referentie.

Componentontwikkeling versnellen

Implementeer eerst in de browser, klik dan voor exacte klassen.

Designtoken-vertaling

Controleer of handgeschreven waarden overeenkomen met Tailwind-schaalwaarden.

Tailwind leren

Klik op elementen om te zien hoe CSS vertaalt naar hulpklassen.

Hoe te gebruiken
1

Activeer

Open de dock en klik op het pictogram.

2

Klik op element

Klik op elk element op de pagina.

3

Bekijk klassen

Het paneel toont de gegenereerde Tailwind-klassenreeks.

4

Kopieer en plak

Klik op Kopiëren en plak in uw code.

Klaar om te proberen? Kopieer als Tailwind?

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

Toevoegen aan Chrome Toevoegen aan Edge Toevoegen aan FireFox