Tailwind Configuration Viewer

Developer Tools

May 11th, 2021

tailwind-config-viewer.jpg

Tailwind Config Viewer is a local UI tool for visualizing your Tailwind CSS configuration file. You can keep it open during development to quickly reference custom Tailwind values and classes:

You can toggle between a light and dark mode UI, and clicking on each config copies the CSS class to your clipboard.

If you want to explore your project's Tailwind configuration quickly, all you need to do is install the NPM package and run an NPM command:

1# Install globally
2npm i tailwind-config-viewer -g
3 
4# Or install in your project
5npm install --save-dev tailwind-config-viewer
6 
7# Run the command
8npx tailwind-config-viewer
9 
10# Specify the path to the config file
11npx tailwind-config-viewer -c path/to/tailwind.config.js

You can also export the site and upload it to a static host:

1npx tailwind-config-viewer export ./output-dir

This project uses Vue and Tailwind for the UI (among other things) and can act as an excellent configuration reference for your team. You can learn more about this package, get full installation instructions, configuration options, and view the source code on GitHub.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.