Tailwind Config Viewer

View the config of your Tailwind CSS project in a sidebar. It will show you all the colors, fonts, spacing, etc. that you have defined in your config file as per tailwind.config.js file.

Config file order

The extension will first priorties tailwind.config.ts then tailwind.config.js then tailwind.config.cjs

Screenshots

Config

workspacePath: Use if the config file is not in the root of the project. For example, if you have a monorepo and the config file is in the root of the workspace. Default is current workspace root. You can add either an absolute path (e.g. C:/Users/username/project/tailwind.config.js) or a relative path (e.g. ./tailwind.config.js).

Changelog

0.0.8

• Add support for tailwind.config.ts file.

0.0.6

• workspacePath config option now supports relative paths.

0.0.5

• Added workspacePath config option.
• Bug fix. Using require inside config file was causing an error if {type: module} is enabled.

0.0.4

• Added ESM support for tailwind.config.js

Development

Only use npm as a package manager as vsce commands will not work when other package managers are used.

1. Clone the repo
2. run npm install
3. run cd client && npm install
4. Restart VS Code if you have it open

When you open the project in VS Code, tasks will run automatically to build src and client folder. You can also run manually using the scripts in package.json for both folders.