tailwind.config.scss

@import './src/helper';

$prefix: '' !default;
$separator: '_' !default;

$theme-colors: (
  transparent: transparent,
  black: #000,
  white: #fff,
  gray: (
    100: #f7fafc,
    200: #edf2f7,
    300: #e2e8f0,
    400: #cbd5e0,
    500: #a0aec0,
    600: #718096,
    700: #4a5568,
    800: #2d3748,
    900: #1a202c,
  ),
  red: (
    100: #fff5f5,
    200: #fed7d7,
    300: #feb2b2,
    400: #fc8181,
    500: #f56565,
    600: #e53e3e,
    700: #c53030,
    800: #9b2c2c,
    900: #742a2a,
  ),
  orange: (
    100: #fffaf0,
    200: #feebc8,
    300: #fbd38d,
    400: #f6ad55,
    500: #ed8936,
    600: #dd6b20,
    700: #c05621,
    800: #9c4221,
    900: #7b341e,
  ),
  yellow: (
    100: #fffff0,
    200: #fefcbf,
    300: #faf089,
    400: #f6e05e,
    500: #ecc94b,
    600: #d69e2e,
    700: #b7791f,
    800: #975a16,
    900: #744210,
  ),
  green: (
    100: #f0fff4,
    200: #c6f6d5,
    300: #9ae6b4,
    400: #68d391,
    500: #48bb78,
    600: #38a169,
    700: #2f855a,
    800: #276749,
    900: #22543d,
  ),
  teal: (
    100: #e6fffa,
    200: #b2f5ea,
    300: #81e6d9,
    400: #4fd1c5,
    500: #38b2ac,
    600: #319795,
    700: #2c7a7b,
    800: #285e61,
    900: #234e52,
  ),
  blue: (
    100: #ebf8ff,
    200: #bee3f8,
    300: #90cdf4,
    400: #63b3ed,
    500: #4299e1,
    600: #3182ce,
    700: #2b6cb0,
    800: #2c5282,
    900: #2a4365,
  ),
  indigo: (
    100: #ebf4ff,
    200: #c3dafe,
    300: #a3bffa,
    400: #7f9cf5,
    500: #667eea,
    600: #5a67d8,
    700: #4c51bf,
    800: #434190,
    900: #3c366b,
  ),
  purple: (
    100: #faf5ff,
    200: #e9d8fd,
    300: #d6bcfa,
    400: #b794f4,
    500: #9f7aea,
    600: #805ad5,
    700: #6b46c1,
    800: #553c9a,
    900: #44337a,
  ),
  pink: (
    100: #fff5f7,
    200: #fed7e2,
    300: #fbb6ce,
    400: #f687b3,
    500: #ed64a6,
    600: #d53f8c,
    700: #b83280,
    800: #97266d,
    900: #702459,
  ),
) !default;

$theme-screens: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
) !default;

$theme-spacing: (
  px: 1px,
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 0.75rem,
  4: 1rem,
  5: 1.25rem,
  6: 1.5rem,
  8: 2rem,
  10: 2.5rem,
  12: 3rem,
  16: 4rem,
  20: 5rem,
  24: 6rem,
  32: 8rem,
  40: 10rem,
  48: 12rem,
  56: 14rem,
  64: 16rem,
) !default;

$theme-font-family: (
  sans: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"),
  serif: (Georgia, Cambria, "Times New Roman", Times, serif),
  mono: (Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
) !default;

$theme-font-size: (
  xs: 0.75rem,
  sm: 0.875rem,
  base: 1rem,
  lg: 1.125rem,
  xl: 1.25rem,
  2xl: 1.5rem,
  3xl: 1.875rem,
  4xl: 2.25rem,
  5xl: 3rem,
  6xl: 4rem,
) !default;

$theme-font-weight: (
  hairline: 100,
  thin: 200,
  light: 300,
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  extrabold: 800,
  black: 900,
) !default;

$theme-line-height: (
  none: 1,
  tight: 1.25,
  snug: 1.375,
  normal: 1.5,
  relaxed: 1.625,
  loose: 2,
) !default;

$theme-letter-spacing: (
  tighter: -0.05em,
  tight: -0.025em,
  normal: 0,
  wide: 0.025em,
  wider: 0.05em,
  widest: 0.1em,
) !default;

$theme-text-color: $theme-colors !default;

$theme-background-color: $theme-colors !default;

$theme-background-position: (
  bottom: bottom,
  center: center,
  left: left,
  left-bottom: left-bottom,
  left-top: left-top,
  right: right,
  right-bottom: right-bottom,
  right-top: right-top,
  top: top,
) !default;

$theme-background-size: (
  auto: auto,
  cover: cover,
  contain: contain,
) !default;

$theme-border-width: (
  default: 1px,
  0: 0,
  2: 2px,
  4: 4px,
  8: 8px,
) !default;

$theme-border-color: $theme-colors !default;

$theme-border-radius: (
  default: 0.25rem,
  none: 0,
  sm: 0.125rem,
  lg: 0.5rem,
  full: 9999px,
) !default;

$theme-cursor: (
  auto: auto,
  default: default,
  pointer: pointer,
  wait: wait,
  text: text,
  move: move,
  not-allowed: not-allowed,
) !default;

$theme-width: map-merge(
  map-merge($theme-spacing, (auto: auto)),
  (
    1_2: 50%,
    1_3: 33.33333%,
    2_3: 66.66667%,
    1_4: 25%,
    2_4: 50%,
    3_4: 75%,
    1_5: 20%,
    2_5: 40%,
    3_5: 60%,
    4_5: 80%,
    1_6: 16.66667%,
    2_6: 33.33333%,
    3_6: 50%,
    4_6: 66.66667%,
    5_6: 83.33333%,
    1_12: 8.33333%,
    2_12: 16.66667%,
    3_12: 25%,
    4_12: 33.33333%,
    5_12: 41.66667%,
    6_12: 50%,
    7_12: 58.33333%,
    8_12: 66.66667%,
    9_12: 75%,
    10_12: 83.33333%,
    11_12: 91.66667%,
    full: 100%,
    screen: 100vw,
  ),
) !default;

$theme-height: map-merge(
   map-merge($theme-spacing, (auto: auto)),
   (
     full: 100%,
     screen: 100vh,
   ),
) !default;

$theme-min-width: (
  0: 0,
  full: 100%,
) !default;

$theme-min-height: (
  0: 0,
  full: 100%,
  screen: 100vh,
) !default;

$theme-max-width: (
  xs: 20rem,
  sm: 24rem,
  md: 28rem,
  lg: 32rem,
  xl: 36rem,
  2xl: 42rem,
  3xl: 48rem,
  4xl: 56rem,
  5xl: 64rem,
  6xl: 72rem,
  full: 100%,
) !default;

$theme-max-height: (
  full: 100%,
  screen: 100vh,
) !default;

$theme-padding: $theme-spacing !default;

$theme-margin: map-merge(
  map-merge($theme-spacing, (auto: auto)),
  negative-map($theme-spacing),
) !default;

$theme-object-position: (
  bottom: bottom,
  center: center,
  left: left,
  left-bottom: left bottom,
  left-top: left top,
  right: right,
  right-bottom: right bottom,
  right-top: right top,
  top: top,
) !default;

$theme-box-shadow: (
  default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
  outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
  none: 'none',
) !default;

$theme-z-index: (
  auto: auto,
  0: 0,
  10: 10,
  20: 20,
  30: 30,
  40: 40,
  50: 50,
) !default;

$theme-opacity: (
  0: 0,
  25: 0.25,
  50: 0.5,
  75: 0.75,
  100: 1,
) !default;

$theme-fill: (
  current: currentColor,
) !default;

$theme-stroke: (
  current: currentColor,
) !default;

$theme-flex: (
  initial: 0 1 auto,
  1: 1 1 0%,
  auto: auto,
  none: none,
) !default;

$theme-flex-grow: (
  0: 0,
  default: 1,
) !default;

$theme-flex-shrink: (
  0: 0,
  default: 1,
) !default;

$theme-order: (
  first: -9999,
  last: 9999,
  none: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
  9: 9,
  10: 10,
  11: 11,
  12: 12,
) !default;

$theme-list-style-type: (
  none: none,
  disc: disc,
  decimal: decimal,
) !default;

$theme-inset: (
  0: 0,
  auto: auto,
) !default;

$variants-appearance: (responsive) !default;
$variants-background-attachment: (responsive) !default;
$variants-background-color: (responsive, hover, focus) !default;
$variants-background-position: (responsive) !default;
$variants-background-repeat: (responsive) !default;
$variants-background-size: (responsive) !default;
$variants-border-collapse: (responsive) !default;
$variants-border-color: (responsive, hover, focus) !default;
$variants-border-radius: (responsive) !default;
$variants-border-style: (responsive) !default;
$variants-border-width: (responsive) !default;
$variants-cursor: (responsive) !default;
$variants-display: (responsive) !default;
$variants-flex-direction: (responsive) !default;
$variants-flex-wrap: (responsive) !default;
$variants-align-items: (responsive) !default;
$variants-align-self: (responsive) !default;
$variants-justify-content: (responsive) !default;
$variants-align-content: (responsive) !default;
$variants-flex: (responsive) !default;
$variants-flex-grow: (responsive) !default;
$variants-flex-shrink: (responsive) !default;
$variants-order: (responsive) !default;
$variants-float: (responsive) !default;
$variants-font-family: (responsive) !default;
$variants-font-weight: (responsive, hover, focus) !default;
$variants-height: (responsive) !default;
$variants-line-height: (responsive) !default;
$variants-list-style-position: (responsive) !default;
$variants-list-style-type: (responsive) !default;
$variants-margin: (responsive) !default;
$variants-max-height: (responsive) !default;
$variants-max-width: (responsive) !default;
$variants-min-height: (responsive) !default;
$variants-min-width: (responsive) !default;
$variants-object-fit: (responsive) !default;
$variants-object-position: (responsive) !default;
$variants-opacity: (responsive) !default;
$variants-outline: (responsive, focus) !default;
$variants-overflow: (responsive) !default;
$variants-padding: (responsive) !default;
$variants-pointer-events: (responsive) !default;
$variants-position: (responsive) !default;
$variants-inset: (responsive) !default;
$variants-resize: (responsive) !default;
$variants-box-shadow: (responsive, hover, focus) !default;
$variants-fill: (responsive) !default;
$variants-stroke: (responsive) !default;
$variants-table-layout: (responsive) !default;
$variants-text-align: (responsive) !default;
$variants-text-color: (responsive, hover, focus) !default;
$variants-font-size: (responsive) !default;
$variants-font-style: (responsive) !default;
$variants-text-transform: (responsive) !default;
$variants-text-decoration: (responsive, hover, focus) !default;
$variants-font-smoothing: (responsive) !default;
$variants-letter-spacing: (responsive) !default;
$variants-user-select: (responsive) !default;
$variants-vertical-align: (responsive) !default;
$variants-visibility: (responsive) !default;
$variants-white-space: (responsive) !default;
$variants-word-break: (responsive) !default;
$variants-width: (responsive) !default;
$variants-z-index: (responsive) !default;

$core-plugins-appearance: true !default;
$core-plugins-background-attachment: true !default;
$core-plugins-background-color: true !default;
$core-plugins-background-position: true !default;
$core-plugins-background-repeat: true !default;
$core-plugins-background-size: true !default;
$core-plugins-border-collapse: true !default;
$core-plugins-border-color: true !default;
$core-plugins-border-radius: true !default;
$core-plugins-border-style: true !default;
$core-plugins-border-width: true !default;
$core-plugins-cursor: true !default;
$core-plugins-display: true !default;
$core-plugins-flex-direction: true !default;
$core-plugins-flex-wrap: true !default;
$core-plugins-align-items: true !default;
$core-plugins-align-self: true !default;
$core-plugins-justify-content: true !default;
$core-plugins-align-content: true !default;
$core-plugins-flex: true !default;
$core-plugins-flex-grow: true !default;
$core-plugins-flex-shrink: true !default;
$core-plugins-order: true !default;
$core-plugins-float: true !default;
$core-plugins-font-family: true !default;
$core-plugins-font-weight: true !default;
$core-plugins-height: true !default;
$core-plugins-line-height: true !default;
$core-plugins-list-style-position: true !default;
$core-plugins-list-style-type: true !default;
$core-plugins-margin: true !default;
$core-plugins-max-height: true !default;
$core-plugins-max-width: true !default;
$core-plugins-min-height: true !default;
$core-plugins-min-width: true !default;
$core-plugins-object-fit: true !default;
$core-plugins-object-position: true !default;
$core-plugins-opacity: true !default;
$core-plugins-outline: true !default;
$core-plugins-overflow: true !default;
$core-plugins-padding: true !default;
$core-plugins-pointer-events: true !default;
$core-plugins-position: true !default;
$core-plugins-inset: true !default;
$core-plugins-resize: true !default;
$core-plugins-box-shadow: true !default;
$core-plugins-fill: true !default;
$core-plugins-stroke: true !default;
$core-plugins-table-layout: true !default;
$core-plugins-text-align: true !default;
$core-plugins-text-color: true !default;
$core-plugins-font-size: true !default;
$core-plugins-font-style: true !default;
$core-plugins-text-transform: true !default;
$core-plugins-text-decoration: true !default;
$core-plugins-font-smoothing: true !default;
$core-plugins-letter-spacing: true !default;
$core-plugins-user-select: true !default;
$core-plugins-vertical-align: true !default;
$core-plugins-visibility: true !default;
$core-plugins-white-space: true !default;
$core-plugins-word-break: true !default;
$core-plugins-width: true !default;
$core-plugins-z-index: true !default;