text-formatter/tailwind.config.js at main · ashco/text-formatter · 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
const plugin = require("tailwindcss/plugin");

module.exports = {
  purge: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"],
  theme: {
    extend: {
      height: {
        30: "30vh",
        35: "35vh",
      },
      minHeight: {
        30: "30vh",
        "1/4": "25%",
        "1/2": "50%",
        "3/4": "75%",
      },
      gridTemplateRows: {
        mobile: "1fr auto 1fr",
        "desktop-text-input": "1fr auto",
        "desktop-text-output": "auto 1fr",
        desktop: "100vh",
      },
      gridTemplateColumns: {
        desktop: "1fr 280px 1fr",
      },
    },
  },
  variants: {
    // backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
  },
  plugins: [
    plugin(function ({ addComponents }) {
      const buttons = {
        ".btn": {
          padding: ".5rem 1rem",
          borderRadius: ".25rem",
          fontWeight: "600",
          // '&:hover': {
          //   transform: 'translateY(-1px)'
          // }
        },
        ".btn-blue": {
          backgroundColor: "#3490dc",
          color: "#fff",
          "&:hover": {
            backgroundColor: "#2779bd",
          },
        },
        ".btn-red": {
          backgroundColor: "#e3342f",
          color: "#fff",
          "&:hover": {
            backgroundColor: "#cc1f1a",
          },
        },
      };

      addComponents(buttons);
    }),
  ],
};