gmlnchv / tailwind-design-tokens

Tailwind CSS color palette exported as design tokens in a variety of formats

tailwind-design-tokens

This package imports the Tailwind CSS color palette from tailwindcss/colors and exports it as design tokens in a variety of formats using Style Dictionary.

Supported formats

CSS variables

Example

:root {
  --tw-color-rose-50: #fff1f2;
  --tw-color-rose-100: #ffe4e6;
}

Import

@import 'tailwind-design-tokens/dist/tokens.css';

SCSS variables

Example

$tw-color-rose-50: #fff1f2;
$tw-color-rose-100: #ffe4e6;

Import

@import 'tailwind-design-tokens/dist/tokens.scss';

LESS variables

Example

@tw-color-rose-50: #fff1f2;
@tw-color-rose-100: #ffe4e6;

Import

@import 'tailwind-design-tokens/dist/tokens.less';

ES6 modules

Example

export const TwColorRose50 = '#fff1f2';
export const TwColorRose100 = '#ffe4e6';

Import

import {
  TwColorRose50,
  TwColorRose100,
} from 'tailwind-design-tokens/dist/tokens.es6.js';

Android

Example

<resources>
  <color name="tw_color_rose_50">#fffff1f2</color>
  <color name="tw_color_rose_100">#ffffe4e6</color>
</resources>

Objective-C

Example

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

#define TwColorRose50 [UIColor colorWithRed:1.000f green:0.945f blue:0.949f alpha:1.000f]

Swift

Example

public class Tailwind {
  public static let twColorRose50 = UIColor(red: 1.000, green: 0.945, blue: 0.949, alpha:1)
}

Dart

Example

class Tailwind {
  Tailwind._();

  static const twColorRose50 = Color(0xFFFFF1F2);
  static const twColorRose100 = Color(0xFFFFE4E6);
}