farishan tailwind custom breakpoints | farishan tailwind custom container plugin

tailwind.config.js

/**
 * Custom Breakpoints
 */
const screens = {
  sm: '375px',
  md: '768px',
  mdp: '900px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1440px',
  '3xl': '1900px',
  '4xl': '2500px'
};

/**
 * Custom Container Plugin - modifies Tailwind’s default container.
 * Deps: Custom Breakpoints
 */
const containerPlugin = ({ addComponents }) => {
  const containerBase = {
    maxWidth: '100%',
    marginLeft: 'auto',
    marginRight: 'auto',
    paddingLeft: '16px',
    paddingRight: '16px',
    '@screen md': {
      paddingLeft: '30px',
      paddingRight: '30px'
    },
    '@screen xl': {
      paddingLeft: '80px',
      paddingRight: '80px'
    },
    '@screen 2xl': {
      paddingLeft: 0,
      paddingRight: 0
    }
  };

  addComponents({
    '.container': {
      ...containerBase,
      '@screen xl': {
        maxWidth: screens['xl']
      }
    },
    '.container-fluid': {
      ...containerBase,
      '@screen lg': {
        paddingLeft: '45px',
        paddingRight: '45px'
      }
    }
  });
};

// usage: 
// plugins: [containerPlugin]

farishan tailwind custom breakpoints | farishan tailwind custom container plugin