tailwind.config.js

/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
module.exports = {
  theme: {
    extend: {
      colors: {
        'so-blue': '#1976D2',
        gray: {
          100: '#f5f5f5',
          200: '#eeeeee',
          300: '#e0e0e0',
          400: '#bdbdbd',
          500: '#9e9e9e',
          600: '#757575',
          700: '#616161',
          800: '#424242',
          900: '#212121'
        }
      },
      gradientColorStops: {
        'so-blue': '#1976D2',
        'so-blue-dark': '#061b2d'
      },
      borderRadius: {
        xl: '2.5rem'
      }
    },
    screens: {
      xs: '480px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px'
    },
    opacity: {
      10: '.1',
      25: '.25',
      30: '.3',
      40: '.4',
      50: '.5',
      60: '.6',
      75: '.75',
      80: '.8',
      85: '.85',
      90: '.9',
      100: '1'
    }
  },
  plugins: [],
  content: [
    'components/**/*.vue',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'plugins/**/*.js',
    'nuxt.config.js'
  ],
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  }
}