Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
tailwind-config-viewer
Advanced tools
Changelog
[2.0.1] 2024-03-31
Readme
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
}
}
}
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.
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
}
}
}
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 jumps over the lazy dog.'
}
}
}
You 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.
Notes
module.exports = {
theme: {
// ...your Tailwind theme config
configViewer: {
// single font
fonts: "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
// or multiple fonts
fonts: [
"https://fonts.googleapis.com/css2?family=Open+Sans&display=swap",
"https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap" // <- only 500 will be used
]
}
]
}
}
}
Shift+Click
on the Tailwind class names to copy multiple to your clipboard at onceFAQs
View your Tailwind CSS config file...visually!
The npm package tailwind-config-viewer receives a total of 205,877 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 1 open source maintainer 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.