tailwind-config-viewer
Advanced tools
The tailwind-config-viewer npm package is a tool that allows developers to visualize their Tailwind CSS configuration. It provides a web interface to explore the configuration settings, making it easier to understand and debug the Tailwind setup.
Start the Viewer
This command starts the Tailwind Config Viewer server, which opens a web interface to visualize the Tailwind CSS configuration. The interface provides a detailed view of the theme, variants, and plugins defined in the Tailwind configuration file.
npx tailwind-config-viewerCustom Configuration Path
This command allows you to specify a custom path to your Tailwind CSS configuration file. This is useful if your configuration file is not located in the default path.
npx tailwind-config-viewer --config ./path/to/tailwind.config.jsPort Configuration
This command allows you to specify a custom port for the Tailwind Config Viewer server. By default, it runs on port 3000, but you can change it to any available port.
npx tailwind-config-viewer --port 8080tailwindcss-debug-screens is a plugin for Tailwind CSS that adds a debug screen to your application, showing the current screen size and breakpoint. While it provides useful debugging information, it does not offer the comprehensive configuration visualization that tailwind-config-viewer does.
tailwindcss-plugins is a collection of plugins for Tailwind CSS that extend its functionality. While it enhances the capabilities of Tailwind CSS, it does not provide a visualization tool for the configuration like tailwind-config-viewer.
Tailwind Config Viewer is a local UI tool for visualizing your Tailwind CSS configuration file. Keep it open during development to quickly reference custom Tailwind values/classes. Easily navigate between sections of the configuration and copy class names to your clipboard by clicking on them.
Demo using the default Tailwind config
Run npx tailwind-config-viewer from within the directory that contains your Tailwind configuration file.
npm i tailwind-config-viewer -g
npm i tailwind-config-viewer -D
When installing locally, you can add an entry into the package.json scripts field to run and open the viewer:
"scripts": {
"tailwind-config-viewer": "tailwind-config-viewer -o"
}
Run the tailwind-config-viewer command from within the directory that contains your Tailwind configuration file.
The serve command is the default command. Running tailwind-config-viewer is the same as tailwind-config-viewer serve.
Options
| Option | Default | Description |
|---|---|---|
| -p, --port | 3000 | The port to run the viewer on. If occupied it will use next available port. |
| -o, --open | false | Open the viewer in default browser |
| -c, --config | tailwind.config.js | Path to your Tailwind config file |
Exports the viewer to a directory that can be uploaded to a static host. It accepts the output directory path as its sole argument.
tailwind-config-viewer export ./output-dir
If an output directory isn't specificied it will be output to tcv-build.
Options
| Option | Default | Description |
|---|---|---|
| -c, --config | tailwind.config.js | Path to your Tailwind config file |
You can declare a configViewer property in your Tailwind configuration's theme object in order to customize certain aspects of the config viewer.
module.exports = {
theme: {
// ...your Tailwind theme config
configViewer: {
// ... configViewer Options
}
}
}
Currently it only supports one config option: themeReplacements.
In some instances you may want to replace values used in your Tailwind config when it is displayed in the config viewer. One scenario where this is necessary is when you are using CSS variables for your theme values:
module.exports = {
theme: {
colors: {
black: 'var(--color-black)'
}
}
}
In order for the config viewer to properly display this color, you need to provide a replacement for it:
module.exports = {
theme: {
colors: {
black: 'var(--color-black)'
},
configViewer: {
themeReplacements: {
colors: {
black: '#000000'
}
}
}
}
}
You can replace any value in your theme for display in the config viewer by setting the corresponding property/value in the themeReplacements object.
FAQs
View your Tailwind CSS config file...visually!
The npm package tailwind-config-viewer receives a total of 204,086 weekly downloads. As such, tailwind-config-viewer popularity was classified as popular.
We found that tailwind-config-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.