Loading repository data…
itaditya / repository
Use Tailwind tokens as CSS variables, SASS map, SASS variables, ES module, JSON & Common JS module.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Many people wish to use Tailwind's hand-crafted design tokens but don't want to adapt Utility CSS approach. This package provides all the tokens as
Import the CSS file in your bundle. For webpack this works—
import 'tw-universal-tokens/dist/css/theme.css';
This will add all the Tailwind design tokens on :root. Then just use them in your CSS file—
.card {
padding: var(--tw-spacing-4) var(--tw-spacing-8);
min-width: var(--tw-spacing-24);
background-color: var(--tw-color-green-100);
border-radius: var(--tw-rounded-md);
box-shadow: var(--tw-shadow-lg);
}
Use the SCSS partial in your SCSS file like this—
@import 'tw-universal-tokens/dist/scss/theme_variables';
.card {
padding: $tw-spacing-4 $tw-spacing-8;
min-width: $tw-spacing-24;
background-color: $tw-color-green-100;
border-radius: $tw-rounded-md;
box-shadow: $tw-shadow-lg;
}
Use the SCSS partial in your SCSS file like this—
@import 'tw-universal-tokens/dist/scss/theme_map';
.card {
padding: map-get($tw-tokens, 'spacing-4') map-get($tw-tokens, 'spacing-8');
min-width: map-get($tw-tokens, 'spacing-24');
background-color: map-get($tw-tokens, 'color-green-100');
border-radius: map-get($tw-tokens, 'rounded-md');
box-shadow: map-get($tw-tokens, 'shadow-lg');
}
Import the required tokens from the package—
import { Spacing4, Spacing8, Spacing24, ColorGreen100, RoundedLg, ShadowLg } from 'tw-universal-tokens';
Then use them in style attribute like this—
const regularStyles = {
padding: `${Spacing4} ${Spacing8}`,
minWidth: Spacing24,
backgroundColor: ColorGreen100,
borderRadius: RoundedMd,
boxShadow: ShadowLg,
};
<Card style={regularStyles} />
Similarly for CSS in JS libraries do this—
const emotionStyles = css`
padding: ${Spacing4} ${Spacing8},
min-width: ${Spacing24},
background-color: ${ColorGreen100},
border-radius: ${RoundedMd},
box-shadow: ${ShadowLg},
`;
<Card css={regularStyles} />
List of all exports in ES module
A JSON file is also available. In case you need it import from—
"tw-universal-tokens/dist/json/theme.json"
Selected from shared topics, language and repository description—not editorial ratings.
NandanVyas /
An online bookstore created using Next JS, Tailwind, and MongoDB where users can buy books. The website features dark mode, password encryption, web token etc
45/100 health