Config viewer
A local UI tool for visualizing your Tailwind CSS configuration file during development.
What is Config viewer?
Tailwind Config Viewer is a local development tool that creates a visual interface for your Tailwind CSS configuration file. It allows developers to browse colors, spacing, typography, and other theme values, and quickly copy class names to use in their projects. It solves the problem of manually searching through configuration files to find specific Tailwind classes during development.
Frontend developers and designers using Tailwind CSS who want a faster, visual way to reference their design system configuration during development.
Developers choose Tailwind Config Viewer because it provides an immediate, interactive reference for Tailwind classes directly in the browser, eliminating the need to switch between code and documentation. Its local-first approach and clipboard integration streamline the development workflow.
Overview
A local UI tool for visualizing your Tailwind CSS configuration file.
Use Cases
Best For
- Quickly referencing custom Tailwind color palettes and design tokens
- Browsing and copying spacing scale values (padding, margin, width, height)
- Exploring and testing typography settings (font families, sizes, weights)
- Sharing Tailwind configuration with team members via static export
- Learning and understanding complex Tailwind configuration files
- Developing with Tailwind CSS in projects with extensive custom theme configurations
Not Ideal For
- Projects using CSS frameworks other than Tailwind CSS, such as Bootstrap or utility-first alternatives like UnoCSS
- Developers who rely on IDE extensions like Tailwind CSS IntelliSense for real-time class suggestions and don't need a separate browser-based tool
- Teams with minimal custom Tailwind configurations where default classes suffice and a visual tool adds unnecessary overhead
- Real-time collaborative design systems requiring live updates, as this tool is local and static without automatic sync
Pros & Cons
Pros
Enables single-click and bulk copy of Tailwind class names with Shift+Click for multiple selections, directly from the UI as described in Usage Tips, speeding up development workflow.
Exports the viewer as static HTML for hosting on any server, making it easy to share Tailwind configurations with team members without local installation, as shown in the export command.
Supports theme replacements for CSS variables and custom font loading via URLs, allowing accurate visual representation of design tokens, though with limitations on local files.
Includes a light/dark theme switch for comfortable viewing in different environments, enhancing usability as listed in Key Features.
Cons
Fonts can only be loaded from URLs, not local files, and if fonts are in the config without URLs, they display incorrectly with no warning, as admitted in the Configuration notes.
Exclusively designed for Tailwind CSS, so it's useless for projects using other CSS frameworks or custom design systems outside Tailwind.
As a local serve tool, it doesn't automatically refresh when the Tailwind config file changes, requiring manual restarts to see updates, which can interrupt workflow.
Frequently Asked Questions
Related Projects
Prettier pluginA Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
@nuxtjs/tailwindcssTailwind CSS module for Nuxt
tailwindcss-railstailwindcss-rails is a Ruby gem that simplifies using Tailwind CSS within Ruby on Rails applications. It provides a native integration with Rails' asset pipeline, offering installation tasks, build commands, and live-reload capabilities for a smooth development experience. ## Key Features - **Asset Pipeline Integration** — Automatically hooks into Rails' `assets:precompile` and `test:prepare` tasks to generate Tailwind CSS during production builds and test runs. - **Live Rebuild Support** — Includes a Puma plugin and watch tasks for automatic CSS regeneration during development when files change. - **Version Management** — Supports both Tailwind CSS v3 and v4, with an upgrade task to help migrate between major versions. - **Plugin Compatibility** — Allows using Tailwind plugins via npm/Yarn packages and `@plugin` directives in CSS. - **Rails Engine Support** — Experimental feature to include Tailwind CSS from Rails engines in the host application's build. ## Philosophy The gem aims to provide a minimal, convention-over-configuration approach to using Tailwind CSS in Rails, avoiding JavaScript toolchain complexity while maintaining compatibility with Tailwind's ecosystem.
RustyWindCLI for organizing Tailwind CSS classes
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.