https://github.com/tech-away-development/tailwind-studio
Visual editor and component workspace for building, previewing, and exporting Tailwind CSS UI components.
https://github.com/tech-away-development/tailwind-studio
builder frontend generator tailwind tailwind-components tailwindcss ui-components visual-editor
Last synced: about 1 month ago
JSON representation
Visual editor and component workspace for building, previewing, and exporting Tailwind CSS UI components.
- Host: GitHub
- URL: https://github.com/tech-away-development/tailwind-studio
- Owner: Tech-Away-Development
- License: mit
- Created: 2025-10-26T05:16:38.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-26T07:03:23.000Z (8 months ago)
- Last Synced: 2025-11-05T14:08:58.031Z (8 months ago)
- Topics: builder, frontend, generator, tailwind, tailwind-components, tailwindcss, ui-components, visual-editor
- Language: CSS
- Homepage:
- Size: 120 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind Studio
Tailwind Studio is a visual, designer-friendly environment for creating responsive Tailwind CSS components. Design on a live canvas, tweak utility classes with precision, and export clean HTML/React/Vue/Svelte snippets ready for your project.
## Development
### Prerequisites
- Node.js (v18 or higher)
- npm
### Setup
```bash
npm install
```
### Available Scripts
#### Development
```bash
npm run dev
```
Starts the development server with hot module replacement.
#### Build
```bash
npm run build
```
Type-checks the codebase and builds for production.
#### Preview
```bash
npm run preview
```
Preview the production build locally.
### Code Quality
This project uses ESLint and Prettier to maintain code quality and consistent formatting.
#### Linting
```bash
npm run lint # Check for linting errors
npm run lint:fix # Fix linting errors automatically
```
#### Formatting
```bash
npm run format # Format code with Prettier
```
#### Pre-commit Hooks
The project uses Husky and lint-staged to automatically lint and format code before each commit. This ensures all committed code meets the project's quality standards.
### Configuration Files
- **ESLint**: `eslint.config.js` - Linting rules for TypeScript and Vue
- **Prettier**: `.prettierrc.json` - Code formatting rules
- **EditorConfig**: `.editorconfig` - Editor settings for consistent coding style