railwind/tailwind.css at master · aaronbiser/railwind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/* https://javisperez.github.io/tailwindcolorshades/ */
:root {
  /* must match colors in tailwind config */
  --color-link: #059bff;
  --color-link-hover: #0b7eca;
  /* success color */
  --status-success-50: #C4F1CE;
  --status-success-100: #AFECBD;
  --status-success-200: #86E29B;
  --status-success-300: #5DD879;
  --status-success-400: #34CE57;
  --status-success-500: #28A745;
  --status-success-600: #1E7E34;
  --status-success-700: #145523;
  --status-success-800: #0A2C12;
  --status-success-900: #010201;
  /* warning color */
  --status-warning-50: #FFFAED;
  --status-warning-100: #FFF4D3;
  --status-warning-200: #FFE7A0;
  --status-warning-300: #FFDB6D;
  --status-warning-400: #FFCE3A;
  --status-warning-500: #FFC107;
  --status-warning-600: #D39E00;
  --status-warning-700: #A07800;
  --status-warning-800: #6D5200;
  --status-warning-900: #3A2B00;
  /* danger color */
  --status-danger-50: #FEF9F9;
  --status-danger-100: #FAE3E5;
  --status-danger-200: #F3B7BD;
  --status-danger-300: #EB8C95;
  --status-danger-400: #E4606D;
  --status-danger-500: #DC3545;
  --status-danger-600: #BD2130;
  --status-danger-700: #921925;
  --status-danger-800: #66121A;
  --status-danger-900: #3B0A0F;
  /* color 1 */
  --color1-50: #f7f8fd;
  --color1-100: #eef1fb;
  --color1-200: #d6dbf4;
  --color1-300: #bdc6ee;
  --color1-400: #8b9be1;
  --color1-500: #5970D4;
  --color1-600: #5065bf;
  --color1-700: #43549f;
  --color1-800: #35437f;
  --color1-900: #2c3768;
  /* color 2 */
  --color2-50: #fdf7fb;
  --color2-100: #fbeef8;
  --color2-200: #f4d6ed;
  --color2-300: #eebde2;
  --color2-400: #e18bcc;
  --color2-500: #d459b6;
  --color2-600: #bf50a4;
  --color2-700: #9f4389;
  --color2-800: #7f356d;
  --color2-900: #682c59;
  /* color 3 */
  --color3-50: #fbf8fe;
  --color3-100: #f6f1fd;
  --color3-200: #e9dbfa;
  --color3-300: #dcc5f7;
  --color3-400: #c29af1;
  --color3-500: #a86eeb;
  --color3-600: #9763d4;
  --color3-700: #7e53b0;
  --color3-800: #65428d;
  --color3-900: #523673;
  /* color 4 */
  --color4-50: #fff8f8;
  --color4-100: #fef2f0;
  --color4-200: #fddeda;
  --color4-300: #fbcbc3;
  --color4-400: #f8a396;
  --color4-500: #f57c69;
  --color4-600: #dd705f;
  --color4-700: #b85d4f;
  --color4-800: #934a3f;
  --color4-900: #783d33;

  /* fonts */
  --font-sans: 'ui-sans-serif';
  --font-serif: 'ui-serif';
  --font-mono: 'ui-monospace';
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold
  }

  h1 {
    @apply text-5xl;
  }
  h2 {
    @apply text-4xl;
  }
  h3 {
    @apply text-3xl;
  }
  h4 {
    @apply text-2xl;
  }
  h5 {
    @apply text-xl;
  }
  h6 {
    @apply text-lg;
  }
}

@tailwind base;

@tailwind components;

@tailwind utilities;