Vanillajs Tailwind Ui

스킬 파일

Vanillajs Tailwind Ui

Guidelines for Vanilla JS and Tailwind UI architecture. Invoke when adding UI components, side panels, themes, or DOM interactions.

tolchx0 스타2026. 4. 18.

카테고리: Frontend

스킬 내용

Vanilla JS & Tailwind UI

This skill provides the structure and conventions for the frontend UI of the application.

Tech Stack

Vanilla JS: No framework is used. DOM manipulation is direct (document.getElementById).
Tailwind CSS (CDN): Styling is done via Tailwind utility classes defined in index.html and configured in js/tailwind-config.js.

UI Components

Side Drawer: The main interaction panel (toggled with P or UI button) for settings, importing files, and the inspector.
Inspector: Adapts based on single, multiple, or no selection. Make sure to update the inspector fields whenever selection state changes.
Theme: Supports light/dark theme via CSS classes toggled in app.js (applyTheme).