JetBrains IDE-Plugin
Flexible Tailwind: Tailwind CSS in jeder JetBrains-IDE
Nutzen Sie Tailwind-CSS-Autovervollständigung, Hover-Doku und Farbvorschau in jeder Sprache, in der Sie Klassen schreiben: HTML, JSX, Vue, PHP, Python-Templates und mehr. Fügen Sie fertige Komponenten aus einem Snippet-Browser mit Live-Vorschau ein.
4,6
3 Bewertungen · JetBrains Marketplace
IntelliJ IDEA · WebStorm · PhpStorm · PyCharm · GoLand · RubyMine · CLion · Rider · Android Studio (ab 2023.3)
- 3500+
- Eingebaute Tailwind-v3-Klassen mit Beschreibung
- 163
- Komponenten zum Kopieren in 15 Kategorien
- Jede
- Sprache: HTML, JSX, Vue, PHP, Python und mehr
01
Autovervollständigung in jeder Sprache
Tailwind-Klassen werden überall vervollständigt, wo Sie sie schreiben: HTML, JSX, TSX, Vue, PHP, Python-Templates und mehr. Das Plugin bringt 3500+ Tailwind-v3-Klassen mit Beschreibungen mit.
- Vervollständigung in
class="",className=""und@apply - Beliebige Werte wie
bg-[#ff0000]und Modifier wiehover:,dark:undmd: - Funktioniert in Hilfsaufrufen wie
cn()in JavaScript
02
Hover-Doku mit CSS-Ausgabe
Fahren Sie über eine Klasse, um zu sehen, was sie tut. Das Popup zeigt die CSS-Eigenschaft und verlinkt die Tailwind-Dokumentation.
- Die CSS-Ausgabe für jede Klasse
- Farbmuster für Farbklassen
- Links zur offiziellen Tailwind-Dokumentation
03
Farbvorschau & Inspections
Farbklassen bekommen ein Farbmuster im Gutter, so sehen Sie die Farbe, bevor Sie die Seite starten.
- Farbmuster für Hintergrund, Text, Rahmen, Ring und mehr
- Eine Warnung für unbekannte Tailwind-Klassen
- Eine Warnung für doppelte Klassen im selben Attribut, mit Quick Fix zum Entfernen
04
Komponenten-Snippets mit Live-Vorschau
Das Toolfenster Tailwind Components enthält 163 fertige Komponenten in 15 Kategorien. Wählen Sie eine aus und sehen Sie sie gerendert.
- Drei Designvarianten pro Komponente: Basic, Material und Creative
- Die Vorschau lässt sich zwischen hellem und dunklem Modus umschalten
- Kopieren Sie eine Komponente in Ihr Projekt, ohne Wrapper-Styling entfernen zu müssen
05
Heroes, Cards, Formulare und mehr
Stöbern Sie nach Kategorie: Heroes, Cards, Buttons, Formulare, Alerts, Navigation, Tabellen, Listen, Typografie, Header und Footer, Fortschritt, Medien, Layout und mehr.
- Hero-Bereiche in voller Breite mit Navbars, CTAs und responsiven Layouts
- Responsive Mobile-first-Komponenten mit Tailwind-Breakpoints
06
Preise
Flexible Tailwind ist Freemium. Aktuelle Pläne und Preise stehen auf der Marketplace-Seite.
Was Entwickler sagen
4,6 3 Bewertungen · JetBrains Marketplace-
★★★★★
“Beautifully made plugin that helps a ton with Tailwind styling. Keep it up! ♥♥♥”
Boogy ·
-
★★★★★
“Gives great help building tailwind components.”
Juan Jose Gonzalez ·
-
★★★★★
“Provides completion where built-in integration doesnt”
jetbrains.vexingly422 ·
Schreiben Sie Tailwind schneller in Ihrer gewohnten IDE
Installieren Sie Flexible Tailwind aus dem JetBrains Marketplace und öffnen Sie eine beliebige Datei mit Tailwind-Klassen.