Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smastrom/tw-variables
🎨 ~400 useful, ready-to-import CSS variables generated straight from Tailwind source.
https://github.com/smastrom/tw-variables
css-variables tailwind tailwind-colors tailwind-css-variables tailwind-tokens tailwind-variabes tailwindcss
Last synced: 2 months ago
JSON representation
🎨 ~400 useful, ready-to-import CSS variables generated straight from Tailwind source.
- Host: GitHub
- URL: https://github.com/smastrom/tw-variables
- Owner: smastrom
- License: 0bsd
- Created: 2023-03-10T12:19:02.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-09T18:12:23.000Z (over 1 year ago)
- Last Synced: 2024-10-30T00:31:32.011Z (2 months ago)
- Topics: css-variables, tailwind, tailwind-colors, tailwind-css-variables, tailwind-tokens, tailwind-variabes, tailwindcss
- Language: CSS
- Homepage:
- Size: 66.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 
# Tailwind Variables (tw-variables)
~400 useful, ready-to-import CSS variables generated straight from Tailwind source files.
## Copy / Paste
| Source | Type |
| --------------------------------------------------------------------------------- | ---------- |
| [jsDelivr](https://www.jsdelivr.com/package/npm/tw-variables?tab=files&path=dist) | Minified |
| [GitHub](https://github.com/smastrom/tw-variables/tree/main/css) | Unminified |
## Browser Import
All variables including colors:
```html
```
One or more subsets:
```html
```
Preflight:
```html
```
## Package Manager
### Installation
```bash
pnpm add -D tw-variables
```
### Import - CSS
All variables (including colors):
```js
import 'tw-variables/variables.css'
```
One or more subsets:
```js
import 'tw-variables/colors.css'
import 'tw-variables/size.css'
import 'tw-variables/green.css'
```
Preflight:
```js
import 'tw-variables/preflight.css'
```
### Import - PostCSS
If using PostCSS, you can use this package in conjunction with [postcss-jit-props](https://github.com/GoogleChromeLabs/postcss-jit-props) to strip any unused variable from the final CSS:
```bash
pnpm add -D postcss postcss-jit-props
```
```js
const postcssJitProps = require('postcss-jit-props')
const twVariables = require('tw-variables')
module.exports = {
plugins: [postcssJitProps(twVariables)],
}
```
## Usage
```css
.my-container {
width: var(--width-full);
max-width: var(--width-xl);
z-index: var(--z-10);
padding: var(--size-4);
margin: var(--size-6);
font-family: 'Basier Circle', var(--family-sans);
font-size: var(--text-base);
font-weight: var(--font-medium);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-tight);
color: var(--blue-500);
background-color: var(--slate-500);
border: var(--border-2) solid var(--blue-500);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
}
```
## Subsets
| Name | Prefix | Import | Reference |
| -------------------------- | ------------------------ | --------------------------------- | --------------------------------------------------------------- |
| `blur` | `--blur-` | `tw-variables/blur.css` | [Link](https://tailwindcss.com/docs/blur) |
| `borderRadius` | `--radius-` | `tw-variables/border-radius.css` | [Link](https://tailwindcss.com/docs/border-radius) |
| `borderWidth` | `--border-` | `tw-variables/border-width.css` | [Link](https://tailwindcss.com/docs/border-width) |
| `boxShadow` | `--shadow-` | `tw-variables/box-shadow.css` | [Link](https://tailwindcss.com/docs/box-shadow) |
| `colors` | `--blue-`, `--slate-`... | `tw-variables/colors.css` | [Link](https://tailwindcss.com/docs/customizing-colors) |
| `dropShadow` | `--drop-` | `tw-variables/drop-shadow.css` | [Link](https://tailwindcss.com/docs/drop-shadow) |
| `fontWeight` | `--font-` | `tw-variables/font-weight.css` | [Link](https://tailwindcss.com/docs/font-weight) |
| `fontFamily` | `--family-` | `tw-variables/font-family.css` | [Link](https://tailwindcss.com/docs/font-family) |
| `fontSize` | `--text-` | `tw-variables/font-size.css` | [Link](https://tailwindcss.com/docs/font-size) |
| `letterSpacing` | `--tracking-` | `tw-variables/letter-spacing.css` | [Link](https://tailwindcss.com/docs/letter-spacing) |
| `lineHeight` | `--leading-` | `tw-variables/line-height.css` | [Link](https://tailwindcss.com/docs/line-height) |
| `opacity` | `--opacity-` | `tw-variables/opacity.css` | [Link](https://tailwindcss.com/docs/opacity) |
| `maxWidth` | `--width-` | `tw-variables/width.css` | [Link](https://tailwindcss.com/docs/max-width) |
| `screens` | `--screen-` | `tw-variables/screen.css` | [Link](https://tailwindcss.com/docs/theme#screens) |
| `spacing` | `--size-` | `tw-variables/size.css` | [Link](https://tailwindcss.com/docs/padding) |
| `transitionTimingFunction` | `--easing-` | `tw-variables/easing.css` | [Link](https://tailwindcss.com/docs/transition-timing-function) |
| `zIndex` | `--z-` | `tw-variables/z-index.css` | [Link](https://tailwindcss.com/docs/z-index) |
## Colors subsets
Colors reference: [Link](https://tailwindcss.com/docs/customizing-colors)
| Name | Prefix | Import |
| --------- | ------------ | -------------------------- |
| `amber` | `--amber-` | `tw-variables/amber.css` |
| `blue` | `--blue-` | `tw-variables/blue.css` |
| `cyan` | `--cyan-` | `tw-variables/cyan.css` |
| `emerald` | `--emerald-` | `tw-variables/emerald.css` |
| `fuchsia` | `--fuchsia-` | `tw-variables/fuchsia.css` |
| `gray` | `--gray-` | `tw-variables/gray.css` |
| `green` | `--green-` | `tw-variables/green.css` |
| `indigo` | `--indigo-` | `tw-variables/indigo.css` |
| `lime` | `--lime-` | `tw-variables/lime.css` |
| `neutral` | `--neutral-` | `tw-variables/neutral.css` |
| `orange` | `--orange-` | `tw-variables/orange.css` |
| `pink` | `--pink-` | `tw-variables/pink.css` |
| `purple` | `--purple-` | `tw-variables/purple.css` |
| `red` | `--red-` | `tw-variables/red.css` |
| `rose` | `--rose-` | `tw-variables/rose.css` |
| `slate` | `--slate-` | `tw-variables/slate.css` |
| `sky` | `--sky-` | `tw-variables/sky.css` |
| `teal` | `--teal-` | `tw-variables/teal.css` |
| `violet` | `--violet-` | `tw-variables/violet.css` |
| `yellow` | `--yellow-` | `tw-variables/yellow.css` |
| `zinc` | `--zinc-` | `tw-variables/zinc.css` |
## Updates
Since the output is generated as expected, for now, I consider this package "complete". I also see no point in updating it everytime Tailwind releases a new version.
Once Tailwind will drop some new tokens that are worth to be added, I'll make sure to include them in a new version of this package.
## See also
[Open Props](https://github.com/argyleink/open-props) by _Adam Argyle_
## License
0BSD