foundation.mozilla.org/tailwind.config.js at Master · https-jrtorres042-github-com/foundation.mozilla.org · 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
120
121
122
123
124
125
126
127
128
/* eslint-disable prettier/prettier */
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
const componentPlugins = require("./tailwind.components");

module.exports = {
  purge: ["./source/js/**/*.{js,jsx}", "./network-api/networkapi/**/*.html"],
  mode: "jit",
  darkMode: "class", // use tw-dark
  important: true,
  corePlugins: {
    // overriding TW default container
    container: false
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      // Adding Column Count to Tailwind CSS
      const newUtilities = {
        ".col-count-1": {
          columnCount: 1,
        },
        ".col-count-2": {
          columnCount: 2,
        },
        ".col-count-3": {
          columnCount: 3,
        },
        ".hash": {
          content: "\"#\"",
        }
      };
      addUtilities(newUtilities);
    }),
    ...componentPlugins,
  ],
  theme: {
    extend: {
      fontWeight: {
        inherit: "inherit",
      },
      screens: {
        print: { raw: "print" },
      },
    },
    // Overriding default spacing
    spacing: {
      0: "0",
      px: "1px",
      1: "0.25rem",
      2: "0.5rem",
      3: "0.75rem",
      4: "1rem",
      5: "1.5rem",
      6: "2rem",
      7: "3rem",
    },
    // Renaming breakpoints temporary until we remove bootstrap usage
    screens: {
      small: "576px",
      medium: "768px",
      large: "992px",
      xlarge: "1200px",
    },
    fontFamily: {
      sans: ["Nunito Sans", "Helvetica", "Arial", "sans-serif"],
      zilla: ["Zilla Slab", "sans-serif"],
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      inherit: "inherit",
      black: colors.black,
      white: colors.white,
      table: "#dee2e6",
      gray: {
        "05": "#f2f2f2",
        20: "#cccccc",
        40: "#999999",
        60: "#666666",
        80: "#333333",
      },
      red: {
        DEFAULT: "#ff4f5e",
        light: "#ffe6e8",
        dark: "#cc0011",
      },
      blue: {
        DEFAULT: "#595cf3",
        dark: "#0d10bf",
        light: "#b7b9fa",
        lightest: "#e7e7fc",
      },
      pni: {
        lilac: "#d3d5fc",
        blue: "#1808f2",
        "blue-purple": "#4a17d4",
        purple: "#7f28b7",
        "purple-pink": "#b0379b",
        pink: "#e4487d",
        yellow: "#fbd545",
      },
      pulse: {
        pink: "#ff506f",
        purple: "#a66efd",
      },
      festival: {
        blue: "#0e11bf",
        purple: "#8f14fb",
      },
      "dear-internet": {
        lilac: "#d3d5fc",
        pink: "#fff0f1",
      },
      "youtube-regrets": {
        red: "#ea0b12",
        "red-lighter": "#fd6976",
        "red-light": "#ffdcdc",
        "red-dark": "#d73027",
        "gray-dark": "#696969",
        purple: "#353552",
      },
    },
  },
  variants: {
    extend: {},
  },
  prefix: "tw-",
};