itaditya / Tw Universal Tokens
Use Tailwind tokens as CSS variables, SASS map, SASS variables, ES module, JSON & Common JS module.
Stars: ✭ 56
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tw Universal Tokens
Analytics
Simple, open-source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
Stars: ✭ 9,469 (+16808.93%)
Mutual labels: tailwindcss
Nuxt Cockpit Static Blog
A static blog built with Nuxt.js, Tailwindcss and Cockpit headless CMS
Stars: ✭ 39 (-30.36%)
Mutual labels: tailwindcss
Tailwindcss
A Tailwind CSS frontend preset for the Laravel Framework
Stars: ✭ 1,056 (+1785.71%)
Mutual labels: tailwindcss
Usefonts
A tool to help designers and developers select their perfect fonts. It uses Google Fonts API to fetch the fonts.
Stars: ✭ 29 (-48.21%)
Mutual labels: tailwindcss
Beamwind
a collection of packages to compile Tailwind CSS like shorthand syntax into CSS at runtime
Stars: ✭ 32 (-42.86%)
Mutual labels: tailwindcss
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+1680.36%)
Mutual labels: tailwindcss
Tailwindcss Intellisense
Intelligent Tailwind CSS tooling for Visual Studio Code
Stars: ✭ 1,066 (+1803.57%)
Mutual labels: tailwindcss
Next Purescript Example
Simple example app using Next.js with Purescript
Stars: ✭ 35 (-37.5%)
Mutual labels: tailwindcss
Next Landing Vpn
An Open Source Landingpage For VPN or Apps. Build using NextJS 10 and Tailwind v2.0
Stars: ✭ 49 (-12.5%)
Mutual labels: tailwindcss
Ideoxan
👩💻 Ideoxan is a free to use online tool to learn programming.
Stars: ✭ 29 (-48.21%)
Mutual labels: tailwindcss
Digital Currency
Create your own Digital Currency with this self-hosted Web App. Check out the Demo website
Stars: ✭ 30 (-46.43%)
Mutual labels: tailwindcss
Intercom Clone
Intercom clone built with NextJS and TailwindCSS
Stars: ✭ 48 (-14.29%)
Mutual labels: tailwindcss
Mf Blogstarter
Eleventy + Tailwind CSS blog starter by Marc Filleul
Stars: ✭ 21 (-62.5%)
Mutual labels: tailwindcss
Empathy
❤️ Lightweight admin dashboard build with Tailwindcss, PurgeCSS, Vuejs, Fontawesome 5.
Stars: ✭ 51 (-8.93%)
Mutual labels: tailwindcss
Smelte
UI framework with material components built with Svelte and Tailwind CSS
Stars: ✭ 871 (+1455.36%)
Mutual labels: tailwindcss
Admin Template Night
Tailwind CSS Starter Template - Admin Dashboard Template (Night Mode)
Stars: ✭ 40 (-28.57%)
Mutual labels: tailwindcss
Larawind
Larawind - Laravel 8.0+ Jetstream and Tailwind CSS Admin Theme
Stars: ✭ 55 (-1.79%)
Mutual labels: tailwindcss
Twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
Stars: ✭ 1,051 (+1776.79%)
Mutual labels: tailwindcss
Cra Template Tailwindcss Typescript
A streamlined Tailwind CSS template for Create React App in TypeScript
Stars: ✭ 48 (-14.29%)
Mutual labels: tailwindcss
Universal Tokens for Tailwind
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
1. CSS variables
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);
}
2. SASS variables
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;
}
3. SASS map
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');
}
4. ES Module
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
5. JSON file
A JSON file is also available. In case you need it import from—
"tw-universal-tokens/dist/json/theme.json"
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].