https://github.com/uvacoder/tailwind-config-viewer
https://uvacoder.github.io/tailwind-config-viewer/
https://github.com/uvacoder/tailwind-config-viewer
abccomponents abcwip components config gh-pages mytools mywip tailwindcss tools vercel
Last synced: about 1 month ago
JSON representation
https://uvacoder.github.io/tailwind-config-viewer/
- Host: GitHub
- URL: https://github.com/uvacoder/tailwind-config-viewer
- Owner: Uvacoder
- Created: 2021-09-11T20:51:02.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-03T08:38:17.000Z (over 3 years ago)
- Last Synced: 2025-03-17T18:51:51.933Z (over 1 year ago)
- Topics: abccomponents, abcwip, components, config, gh-pages, mytools, mywip, tailwindcss, tools, vercel
- Language: Vue
- Homepage: https://tailwind-config-viewer.vercel.app
- Size: 1.26 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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.
https://github.com/rogden/tailwind-config-viewer
**[Demo using the default Tailwind config](https://rogden.github.io/tailwind-config-viewer/)**
## Installation
### NPX
Run `npx tailwind-config-viewer` from within the directory that contains your Tailwind configuration file.
### Globally
`npm i tailwind-config-viewer -g`
### Locally
`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:
```json
"scripts": {
"tailwind-config-viewer": "tailwind-config-viewer -o"
}
```
## Usage
Run the `tailwind-config-viewer` command from within the directory that contains your Tailwind configuration file.
## Commands
### serve (default)
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|
### export
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|
## Configuration
You can declare a `configViewer` property in your Tailwind configuration's theme object in order to customize certain aspects of the config viewer.
```js
module.exports = {
theme: {
// ...your Tailwind theme config
configViewer: {
// ... configViewer Options
}
}
}
```
### 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:
```js
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:
```js
module.exports = {
theme: {
colors: {
black: 'var(--color-black)'
},
configViewer: {
themeReplacements: {
'var(--color-black)': '#000000'
}
}
}
}
```
You can replace any value in your theme for display in the config viewer by setting the corresponding `valueToFind: valueToReplace` in the `themeReplacements` object.
### baseFontSize
The config viewer displays the pixel equivalent of any rem values. By default `baseFontSize` is set to 16 to mirror the default root element font size in most browsers. If you plan on using a different root font size in your project, you should set the value of `baseFontSize` to match.
```js
module.exports = {
theme: {
// ...your Tailwind theme config
configViewer: {
baseFontSize: 20 // default is 16
}
}
}
```
### typographyExample
You can change the default sentence used in the typography sections (Font Size, Letter Spacing etc.)
by setting the `typographyExample` option:
```js
module.exports = {
theme: {
// ...your Tailwind theme config
configViewer: {
typographyExample: 'The quick brown fox jumped over the lazy dog.'
}
}
}
```
## Usage Tips
- `Shift+Click` on the Tailwind class names to copy multiple to your clipboard at once
## Roadmap
- [x] Add static export
- [x] Add Transition section
- [x] Dark Mode toggle
- [ ] Add support for loading custom fonts / font family section