StylePilot — CSS + Tailwind Component Suggester
Stop rewriting the same layout CSS on every project. Pick a component, pick a theme, and get production-ready HTML + fully-commented CSS — or the same components as Tailwind utility classes — in seconds, right inside VS Code.
Works everywhere VS Code runs: Windows, macOS and Linux. No native dependencies, no internet required.
Two output modes
| Mode |
What you get |
Best for |
| Plain CSS (default) |
Clean HTML + commented stylesheet, generated from theme design tokens. |
Any project — no framework needed. |
| Tailwind |
The same 9 components with utility classes baked into the HTML. No separate CSS file. |
Tailwind v3/v4 projects, or quick prototypes via the Play CDN. |
Switch anytime with StylePilot: Set Output Mode (Plain CSS / Tailwind) or the stylepilot.output setting.
Features
- CSS selector suggestions — in any
.css / .scss / .less file (or inside <style> in HTML), just type an element selector — body, header, nav, button, input, label, form, img, table, h1, .container, .card… — and accept the suggestion to get its complete starter rule block: width, margin, padding, font, colors, focus ring, hover states. All values come from your chosen theme.
- 9 component packs — Navbar/Header, Hero, Feature Cards, Stats Row, Testimonial, Pricing Table, CTA Banner, Newsletter Form, Footer. Available in both Plain CSS and Tailwind flavours.
- 4 design themes — Clean Studio (light SaaS), Midnight Glow (dark neon), Aurora Glass (glassmorphism), Neo Brutal (bold borders & hard shadows). Every rule — and every Tailwind class string — is generated from design tokens, so the whole page stays consistent.
- Learn while you build — the generated CSS is annotated with short comments explaining why each rule exists (
min-width: 0 flex fix, clamp() fluid type, backdrop-filter glass, focus rings…). Turn comments off in settings for lean output.
sp- completions — in any HTML/JSX/Vue/Svelte file, type sp- and pick sp-hero, sp-pricing, etc.
- In CSS mode: the HTML is inserted and the matching CSS lands on your clipboard.
- In Tailwind mode: the Tailwind-classed HTML is inserted — done, nothing to paste.
tw- completions — element-level Tailwind snippets in any markup file, in both modes: tw-button, tw-input, tw-card, tw-container, tw-section, tw-h1, tw-badge, tw-avatar, tw-gradient-text… Each one is a small, theme-aware, accessible snippet (focus rings included).
Commands (Ctrl+Shift+P)
| Command |
What it does |
StylePilot: Insert Component (HTML + CSS) |
Pick theme + component, then insert at cursor, open in new editors, or copy. Respects the output mode. |
StylePilot: Build Full Page |
Multi-select sections → a complete, browser-ready page. CSS mode: single file or html+css pair. Tailwind mode: single file with the Play CDN, or HTML-only for an existing Tailwind project. |
StylePilot: Copy Foundation CSS |
CSS mode: reset, container, section rhythm, buttons, focus ring. Tailwind mode: a cheat block of body/container/button/input/card class strings. |
StylePilot: Set Default Theme |
Choose the theme used by sp- / tw- completions. |
StylePilot: Set Output Mode (Plain CSS / Tailwind) |
Switch between classic CSS output and Tailwind utility classes. |
Settings
| Setting |
Default |
Description |
stylepilot.theme |
clean |
Default design theme (clean, midnight, aurora, brutal). |
stylepilot.output |
css |
Output style: css (commented stylesheets) or tailwind (utility classes in HTML). |
stylepilot.includeComments |
true |
Keep explanatory comments in generated CSS. |
Why
CSS yaad rakhne ka daur khatam — element likho, styles khud aa jaati hain. Comments ke saath, toh seekh bhi jaate ho. Tailwind wale ho? Wahi components, utility classes mein.
Made by ktyagi277
| |
