CSS Visualiser

Playing around with a CSS styling tool that automatically converts between CSS, SCSS and Tailwind. Is it useful? Not really!

Demo at https://css-visualizer-flame.vercel.app/

Select from a variety of styled buttons and view and edit their CSS, SCSS or Tailwind. This enables you to convert styling code between them, adjust various aspects of the buttons with sliders, and then copy and paste the relevant styling code.

🚀 Tech Stack

• Next.js 15 - React framework with App Router and Turbopack
• TypeScript - Type-safe JavaScript development
• Tailwind CSS - Utility-first CSS framework
• Mantine UI - Modern React components library
• Turbopack - Ultra-fast development builds
• ESLint - Code quality and consistency

✨ Features

• ⚡ Turbopack for lightning-fast development builds
• 🎨 Hybrid Styling - Tailwind CSS + Mantine UI components
• 🔧 TypeScript for better development experience
• 📱 Responsive Design - Mobile-first approach
• 🌙 Dark Mode Ready - Built-in theme support
• 🧩 Component-Based - Modular and reusable architecture

🏃‍♂️ Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository (if applicable) or use this existing setup
2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Development

Run the development server with Turbopack:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view the application.

The page auto-updates as you edit files - hot reloading is enabled by default.

Building for Production

npm run build
npm run start

📁 Project Structure

src/
  app/
    layout.tsx          # Root layout with Mantine provider
    page.tsx            # Home page showcasing the tech stack
    globals.css         # Global styles and Tailwind imports
  .github/
    copilot-instructions.md  # Copilot customization

🎨 Styling Approach

This project uses a hybrid approach combining:

• Tailwind CSS for utility-first styling, layout, and spacing
• Mantine UI for pre-built components and consistent theming
• CSS Variables for dynamic theming and customization

🛠 Development Commands

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint for code quality

🌟 Key Highlights

• Turbopack Integration: Faster development builds and hot reloading
• Modern Next.js: Using App Router for improved performance and developer experience
• Type Safety: Full TypeScript support throughout the application
• Component Library: Leveraging Mantine's comprehensive component ecosystem
• Responsive Design: Mobile-first approach with Tailwind's responsive utilities

📚 Learn More

• Next.js Documentation
• Tailwind CSS Documentation
• Mantine Documentation
• TypeScript Documentation
• Turbopack Documentation

🚢 Deployment

The easiest way to deploy is using Vercel:

Alternatively, you can deploy to any platform that supports Node.js applications.

---

Built with ❤️ using modern web technologies