Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
ignite
GitHub Repository: ignite/cli
 Path: blob/main/docs/tailwind.config.js
1007 views
1
const defaultTheme = require("tailwindcss/defaultTheme");

2


3
// Px to REM function (static base of 16)

4
const pxToRem = (dest) => 1 / (16 / dest);

5


6
// Config

7
module.exports = {

8
  content: ["./src/**/*.{js,jsx,ts,tsx}"],

9
  corePlugins: {

10
    // preflight: false, // avoid reset all docusaurus css

11
  },

12
  theme: {

13
    borderRadius: {

14
      none: "0",

15
      xs: `${pxToRem(4)}rem`,

16
      s: `${pxToRem(8)}rem`,

17
      sm: `${pxToRem(10)}rem`,

18
      DEFAULT: `${pxToRem(16)}rem`,

19
      md: `${pxToRem(20)}rem`,

20
      lg: `${pxToRem(100)}rem`,

21
      circle: "100%",

22
    },

23
    fontFamily: {

24
      termina: ["termina", defaultTheme.fontFamily.sans],

25
      intervar: ['"Inter var"', defaultTheme.fontFamily.sans],

26
      inter: ["Inter", defaultTheme.fontFamily.sans],

27
      jetbrain: ["JetBrains Mono", defaultTheme.fontFamily.mono],

28
    },

29
    fontSize: {

30
      0: "0",

31
      1: [`${pxToRem(10)}rem`],

32
      2: [`${pxToRem(13)}rem`],

33
      3: [`${pxToRem(16)}rem`],

34
      4: [`${pxToRem(21)}rem`],

35
      5: [`${pxToRem(28)}rem`],

36
      6: [`${pxToRem(32)}rem`],

37
      7: [`${pxToRem(38)}rem`],

38
      8: [`${pxToRem(51)}rem`],

39
      9: [`${pxToRem(56)}rem`],

40
      10: [`${pxToRem(76)}rem`],

41
    },

42
    spacing: {

43
      inherit: "inherit",

44
      auto: "auto",

45
      full: "100%",

46
      px: "1px",

47
      "1/2": "50%",

48
      "1/3": "33.333%",

49
      "2/3": "66.666%",

50
      "1/4": "25%",

51
      "3/4": "75%",

52
      "1/5": "20%",

53
      "2/5": "40%",

54
      "3/5": "60%",

55
      "4/5": "80%",

56
      0: "0",

57
      1: ".25rem",

58
      2: `${pxToRem(6)}rem`,

59
      3: `${pxToRem(8)}rem`,

60
      3.5: `${pxToRem(10)}rem`,

61
      4: `${pxToRem(12)}rem`,

62
      5: `${pxToRem(16)}rem`,

63
      5.5: `${pxToRem(20)}rem`,

64
      6: `${pxToRem(24)}rem`,

65
      7: `${pxToRem(32)}rem`,

66
      7.5: `${pxToRem(40)}rem`,

67
      8: `${pxToRem(48)}rem`,

68
      8.5: `${pxToRem(52)}rem`,

69
      9: `${pxToRem(64)}rem`,

70
      9.5: "5rem",

71
      9.75: `${pxToRem(84)}rem`,

72
      10: `${pxToRem(96)}rem`,

73
      11: `${pxToRem(128)}rem`,

74
      12: `${pxToRem(144)}rem`,

75
      13: `${pxToRem(160)}rem`,

76
      14: `${pxToRem(192)}rem`,

77
      15: `${pxToRem(208)}rem`,

78
    },

79
    colors: {

80
      transparent: "transparent",

81
      current: "currentColor",

82
      inherit: "inherit",

83
      gray: {

84
        0: "#FFFFFF",

85
        30: "rgba(0, 0, 0, 0.03)",

86
        1000: "#000000",

87
      },

88
      card: "#F7F7F7",

89
      border: "rgba(0, 0, 0, 0.07)",

90
      inactive: "rgba(0, 0, 0, 0.33)",

91
      inactiveLight: "rgba(255, 255, 255, 0.44)",

92
      muted: "#555555",

93
      mutedLight: "rgba(255, 255, 255, 0.67)",

94
      fg: "rgba(24, 24, 24, 0.67)",

95
      lightfg: "rgba(24, 24, 24, 0.67)",

96
      link: "#000000",

97
      linkHover: "#555555",

98
      docusaurusColorBase: "var(--ifm-font-color-base)",

99
      docusaurusBgColor: "var(--ifm-background-color)",

100
      docusaurusColorBorder: "var(--ifm-color-emphasis-200)",

101
    },

102
    extend: {},

103
  },

104
  plugins: [],

105
};

106


107