spotify-clone-using-tailwindcss/tailwind.config.js at master · thangnm93/spotify-clone-using-tailwindcss · 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
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ["Poppins", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        transparent: "transparent",
        current: "currentColor",
        card: "#181818",
        navbar: "#634023",
        "card-hover": "#282828",
        "bg-main": "#121212",
        black: colors.black,
        white: colors.white,
        gray: colors.coolGray,
        red: colors.red,
        yellow: colors.amber,
        green: colors.emerald,
        blue: colors.blue,
        indigo: colors.indigo,
        purple: colors.violet,
        pink: colors.pink,
      },
      screens: {
        xs: "475px",
        ...defaultTheme.screens,
        "3xl": "1537px",
        "4xl": "1841px",
        "5xl": "2110px",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addComponents }) {
      const newComponents = {
        ".scrollbar-w-2::-webkit-scrollbar": {
          width: ".5rem !important",
          height: ".5rem !important",
        },
        ".scrollbar-thumb-rounded::-webkit-scrollbar-thumb": {
          borderRadius: ".25rem !important",
        },
        ".scrollbar-thumb-gray::-webkit-scrollbar-thumb": {
          backgroundColor: "rgba(156, 163, 175, 1) !important",
        },
        ".scrollbar-track-gray-lighter::-webkit-scrollbar-track": {
          backgroundColor: "rgba(209, 213, 219, 1) !important",
        },
        ".scrollbar-thumb-transparent::-webkit-scrollbar-thumb": {
          backgroundColor: "transparent",
        },
        ".scrollbar-track-transparent::-webkit-scrollbar-track": {
          backgroundColor: "transparent",
        },
      };
      addComponents(newComponents, {
        variants: ["responsive"],
      });
    }),
  ],
};