[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8797":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},8797,"tailwind-config-viewer","rogden\u002Ftailwind-config-viewer","rogden","A local UI tool for visualizing your Tailwind CSS configuration file.","",null,"Vue",2214,120,18,28,0,1,4,56.15,false,"master",true,[24,25,26,27],"tailwind","tailwind-css","tailwindcss","vue","2026-06-12 04:00:41","# Tailwind Config Viewer\n\n![Screenshot of UI](https:\u002F\u002Fgithub.com\u002Frogden\u002Ftailwind-config-viewer\u002Fraw\u002Fmaster\u002Fui-example.jpg)\n\nTailwind 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\u002Fclasses. Easily navigate between sections of the configuration and copy class names to your clipboard by clicking on them. \n\n**[Demo using the default Tailwind config](https:\u002F\u002Frogden.github.io\u002Ftailwind-config-viewer\u002F)**\n\n## Installation\n\n### NPX\nRun `npx tailwind-config-viewer` from within the directory that contains your Tailwind configuration file.\n\n### Globally\n`npm i tailwind-config-viewer -g`\n\n### Locally\n`npm i tailwind-config-viewer -D`\n\nWhen installing locally, you can add an entry into the package.json scripts field to run and open the viewer:\n\n```json\n\"scripts\": {\n  \"tailwind-config-viewer\": \"tailwind-config-viewer -o\"\n}\n```\n\n## Usage\n\nRun the `tailwind-config-viewer` command from within the directory that contains your Tailwind configuration file.\n\n## Commands\n\n### serve (default)\n\nThe `serve` command is the default command. Running `tailwind-config-viewer` is the same as `tailwind-config-viewer serve`. \n\n**Options**\n\n|Option|Default|Description|\n|----|----|----|\n|-p, --port|`3000`|The port to run the viewer on. If occupied it will use next available port.|\n|-o, --open|`false`|Open the viewer in default browser|\n|-c, --config|`tailwind.config.js`|Path to your Tailwind config file|\n\n### export\n\nExports the viewer to a directory that can be uploaded to a static host. It accepts the output directory path as its sole argument. \n\n`tailwind-config-viewer export .\u002Foutput-dir`\n\nIf an output directory isn't specificied it will be output to `tcv-build`.\n\n**Options**\n\n|Option|Default|Description|\n|----|----|----|\n|-c, --config|`tailwind.config.js`|Path to your Tailwind config file|\n\n## Configuration\n\nYou can declare a `configViewer` property in your Tailwind configuration's theme object in order to customize certain aspects of the config viewer.\n\n```js\nmodule.exports = {\n  theme: {\n    \u002F\u002F ...your Tailwind theme config\n    configViewer: {\n      \u002F\u002F ... configViewer Options\n    }\n  }\n}\n```\n### themeReplacements\n\nIn 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:\n\n```js\nmodule.exports = {\n  theme: {\n    colors: {\n      black: 'var(--color-black)'\n    }\n  }\n}\n```\n\nIn order for the config viewer to properly display this color, you need to provide a replacement for it:\n\n```js\nmodule.exports = {\n  theme: {\n    colors: {\n      black: 'var(--color-black)'\n    },\n    configViewer: {\n      themeReplacements: {\n        'var(--color-black)': '#000000'\n      }\n    }\n  }\n}\n```\n\nYou can replace any value in your theme for display in the config viewer by setting the corresponding `valueToFind: valueToReplace` in the `themeReplacements` object.\n\n### baseFontSize\n\nThe 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.\n\n```js\nmodule.exports = {\n  theme: {\n    \u002F\u002F ...your Tailwind theme config\n    configViewer: {\n      baseFontSize: 20 \u002F\u002F default is 16\n    }\n  }\n}\n```\n\n### typographyExample\n\nYou can change the default sentence used in the typography sections (Font Size, Letter Spacing etc.)\nby setting the `typographyExample` option:\n\n```js\nmodule.exports = {\n  theme: {\n    \u002F\u002F ...your Tailwind theme config\n    configViewer: {\n      typographyExample: 'The quick brown fox jumps over the lazy dog.'\n    }\n  }\n}\n```\n\n### fonts\n\nYou can add custom fonts to the config viewer that are used in your Tailwind config by passing in a font url as a string, or an array of font urls.\n\n**Notes**\n\n* If multiple font weights are provided in a single url (see example) only the last weight will be used.\n* If fonts are in your Tailwind theme config but urls are not provided they will not display correctly (currently with no warning).\n* Fonts can only be provided via urls not local files. If this something you need, please open a ticket or a pull request.\n\n```js\nmodule.exports = {\n  theme: {\n    \u002F\u002F ...your Tailwind theme config\n    configViewer: {\n      \u002F\u002F single font\n      fonts: \"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Open+Sans&display=swap\"\n      \u002F\u002F or multiple fonts\n      fonts: [\n        \"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Open+Sans&display=swap\",\n        \"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:wght@100;500&display=swap\" \u002F\u002F \u003C- only 500 will be used\n      ]\n        }\n      ]\n    }\n  }\n}\n```\n\n## Usage Tips\n\n- `Shift+Click` on the Tailwind class names to copy multiple to your clipboard at once\n\n## Roadmap\n\n- [x] Add static export \n- [x] Add Transition section\n- [x] Dark Mode toggle\n- [x] Add support for loading custom fonts \u002F font family section\n","Tailwind Config Viewer 是一个用于可视化 Tailwind CSS 配置文件的本地 UI 工具。其核心功能包括通过直观界面展示配置详情，支持快速查找自定义值\u002F类，并允许用户点击复制类名至剪贴板。基于 Vue 构建，该工具提供了便捷的安装方式（如 NPX、全局或本地安装）以及灵活的使用选项，比如指定运行端口、自动打开浏览器等。特别适合在开发过程中作为辅助工具使用，帮助开发者更高效地管理和查看 Tailwind CSS 的配置信息。",2,"2026-06-11 03:19:47","top_language"]