tw-runner/mysite/tailwind.config.js

Run and manage Tower Website projects with this utility.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./content/**/*.{html,md}",
    "./layouts/**/*.{html,js,css}",
    "./layouts/**/**/*.{html,js,css}",
    "./archetypes/**/*.md",
  ],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "5rem",
        "2xl": "32rem",
      },
      screens: {
        sm: '600px',
        md: '728px',
        lg: '944px',
        xl: '1200px',
        '2xl': '1456px',
      },
    },
    extend: {
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        boeotia: ["boeotia", "sans-serif"],
        vortax: ["vortax", "sans-serif"],
      },
    },
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          '@screen sm': {
            maxWidth: '600px',
          },
          '@screen md': {
            maxWidth: '728px',
          },
          '@screen lg': {
            maxWidth: '944px',
          },
          '@screen xl': {
            maxWidth: '1200px',
          },
          '@screen 2xl': {
            maxWidth: '1200px',
          },
        }
      })
    }
  ]
};