A Local UI Tool for Visualizing Your Tailwind CSS Configuration File

A Local UI Tool for Visualizing Your Tailwind CSS Configuration File

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.

Tailwind Config Viewer

Screenshot of UI

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

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:

"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.

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:

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: {
        '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.

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:

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

  • Add static export
  • Add Transition section
  • Dark Mode toggle
  • Add support for loading custom fonts / font family section

Download Details:

Author: rogden

Demo: https://rogden.github.io/tailwind-config-viewer/

Source Code: https://github.com/rogden/tailwind-config-viewer

vue vuejs javascript css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Custom Range Slider CSS with Vue.js

Custom Range Slider CSS with vueCustomizable Input Range Vue Version. Html Css JavaScript ... on the native range slider. This is a simple vue-range slider, that supports custom values, labels and more.

Styling a Vue.js Application using CSS

Learn to apply different CSS styling methods to your Vue.js application to improve its aesthetic performance. We will explore different ways of styling Vue components with CSS by building a simple web page.

A Component Library for VueJs (Vue 3) base on Tailwind Css

iSPA Element UI A Component Library for VueJs (Vue 3) base on Tailwind Css.