DEVELOPMENT ENVIRONMENT

~liljamo/liljamo-dev-zola

ref: 0af94e5203e87de162c9e46dec32882a7c31ea8e liljamo-dev-zola/tailwind.config.js -rw-r--r-- 2.7 KiB
0af94e52 — Jonni Liljamo fix: extend tailwind colors, not replace 9 months ago 
                                                                                
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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.html", "./content/**/*.md"],
  theme: {
    fontFamily: {
      "sans": ["Inter", "Inter-fallback"],
      "serif": ["Inter", "Inter-fallback"],
      "mono": ["FiraMono"],
    },
    extend: {
      colors: {
        'text': {
          orig: 'hsl(200, 60%, 1%)',
          50: 'hsl(200, 60%, 95%)',
          100: 'hsl(199, 61%, 90%)',
          200: 'hsl(200, 61%, 80%)',
          300: 'hsl(200, 59%, 70%)',
          400: 'hsl(200, 60%, 60%)',
          500: 'hsl(200, 60%, 50%)',
          600: 'hsl(200, 60%, 40%)',
          700: 'hsl(200, 59%, 30%)',
          800: 'hsl(200, 61%, 20%)',
          900: 'hsl(199, 61%, 10%)',
          950: 'hsl(200, 60%, 5%)',
        },
        'background': {
          orig: 'hsl(197, 64%, 98%)',
          50: 'hsl(195, 62%, 95%)',
          100: 'hsl(196, 65%, 90%)',
          200: 'hsl(197, 65%, 80%)',
          300: 'hsl(197, 63%, 70%)',
          400: 'hsl(197, 64%, 60%)',
          500: 'hsl(197, 64%, 50%)',
          600: 'hsl(197, 64%, 40%)',
          700: 'hsl(197, 63%, 30%)',
          800: 'hsl(197, 65%, 20%)',
          900: 'hsl(196, 65%, 10%)',
          950: 'hsl(199, 62%, 5%)',
        },
        'primary': {
          orig: 'hsl(201, 41%, 69%)',
          50: 'hsl(198, 38%, 95%)',
          100: 'hsl(200, 41%, 90%)',
          200: 'hsl(201, 41%, 80%)',
          300: 'hsl(201, 41%, 70%)',
          400: 'hsl(201, 41%, 60%)',
          500: 'hsl(201, 41%, 50%)',
          600: 'hsl(201, 41%, 40%)',
          700: 'hsl(201, 41%, 30%)',
          800: 'hsl(201, 41%, 20%)',
          900: 'hsl(200, 41%, 10%)',
          950: 'hsl(204, 38%, 5%)',
        },
        'secondary': {
          orig: 'hsl(200, 67%, 87%)',
          50: 'hsl(201, 68%, 95%)',
          100: 'hsl(201, 69%, 90%)',
          200: 'hsl(200, 67%, 80%)',
          300: 'hsl(200, 67%, 70%)',
          400: 'hsl(200, 67%, 60%)',
          500: 'hsl(200, 67%, 50%)',
          600: 'hsl(200, 67%, 40%)',
          700: 'hsl(200, 67%, 30%)',
          800: 'hsl(200, 67%, 20%)',
          900: 'hsl(201, 69%, 10%)',
          950: 'hsl(198, 68%, 5%)',
        },
        'accent': {
          orig: 'hsl(201, 19%, 40%)',
          50: 'hsl(204, 20%, 95%)',
          100: 'hsl(200, 18%, 90%)',
          200: 'hsl(201, 20%, 80%)',
          300: 'hsl(201, 19%, 70%)',
          400: 'hsl(201, 19%, 60%)',
          500: 'hsl(201, 19%, 50%)',
          600: 'hsl(201, 19%, 40%)',
          700: 'hsl(201, 19%, 30%)',
          800: 'hsl(201, 20%, 20%)',
          900: 'hsl(200, 18%, 10%)',
          950: 'hsl(204, 20%, 5%)',
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography")
  ],
}