foundation.mozilla.org/tailwind.components.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
const plugin = require("tailwindcss/plugin");
module.exports = [
  plugin(function ({ addComponents }) {
    // Using Same breakpoints for containers as bootstrap
    addComponents([
      {
        "@media (min-width: 576px)": {
          ".container": {
            maxWidth: "540px",
          },
        },
      },
      {
        "@media (min-width: 768px)": {
          ".container": {
            maxWidth: "720px",
          },
        },
      },
      {
        "@media (min-width: 992px)": {
          ".container": {
            maxWidth: "960px",
          },
        },
      },
      {
        "@media (min-width: 1200px)": {
          ".container": {
            maxWidth: "1140px",
          },
        },
      },
      {
        ".container": {
          width: "100%",
          paddingRight: "1rem",
          paddingLeft: "1rem",
          marginRight: "auto",
          marginLeft: "auto",
        },
      },
      // Adding rows to Tailwind CSS
      {
        ".row": {
          display: "flex",
          flexWrap: "wrap",
          marginRight: "-1rem",
          marginLeft: "-1rem",
        },
      },
    ]);
  }),
];