Tailwind Default Setup (v1.4)

base.css

@import url('https://rsms.me/inter/inter.css');

html {
  font-family: 'Inter', sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', sans-serif;
  }
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  margin-left: -20px;
  margin-right: -20px;
}

.column {
  margin-left: 20px;
  margin-right: 20px;
}

layout.css

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import './base';

@import 'tailwindcss/utilities';

tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    screens: {
      sm: '360px',
      md: '560px',
      lg: '768px',
      xl: '960px',
      xxl: '1200px',
    },
    textColor: {
      primary: 'var(--color-text-primary)',
      secondary: 'var(--color-text-secondary)',
      tertiary: 'var(--color-text-tertiary)',
      'menu-active': 'var(--color-menu-active)',
    },
    backgroundColor: {
      primary: 'var(--color-bg-primary)',
      secondary: 'var(--color-bg-secondary)',
      tertiary: 'var(--color-bg-tertiary)',
    },
    blockSpacing: {
      px: '1px',
      '0': '0',
      '1': '5px',
      '2': '10px',
      '3': '15px',
      '4': '20px',
      '5': '25px',
      '6': '30px',
      '7': '35px',
      '8': '40px',
      '9': '45px',
      '10': '50px',
      '-1': '-5px',
      '-2': '-10px',
      '-3': '-15px',
      '-4': '-20px',
      '-5': '-25px',
      '-6': '-30px',
      '-7': '-35px',
      '-8': '-40px',
      '-9': '-45px',
      '-10': '-50px',
      auto: 'auto',
    },
    spacing: {
      auto: 'auto',
      '1/12': '8.33333333%',
      '2/12': '16.66666667%',
      '3/12': '25%',
      '4/12': '33.33333333%',
      '5/12': '41.66666667%',
      '6/12': '50%',
      '7/12': '58.33333333%',
      '8/12': '66.66666667%',
      '9/12': '75%',
      '10/12': '83.33333333%',
      '11/12': '91.66666667%',
      '12/12': '100%',
      '1/5': '20%',
      '2/5': '40%',
      '3/5': '60%',
      '4/5': '80%',
      '5/5': '100%',
      full: '100%',
    },
    width: theme => ({
      ...theme('spacing'),
      screen: '100vw',
    }),
    height: theme => ({
      screen: '100vh',
      auto: 'auto',
      full: '100%',
    }),
    minHeight: theme => ({
      screen: '100vh',
      auto: 'auto',
    }),
    maxWidth: theme => ({
      ...theme('spacing'),
      screen: '100vw',
    }),
    minWidth: theme => ({
      ...theme('spacing'),
      screen: '100vw',
    }),
    margin: theme => ({
      ...theme('blockSpacing'),
    }),
    padding: theme => ({
      ...theme('blockSpacing'),
    }),
    extend: {},
  },
  variants: {},
  plugins: [],
  corePlugins: {
    container: false,
  },
}