Customizing Builds

One way you can change Tailwind is by using the tailwind config file to change how themes are built.

Extending

module.exports = {
  theme: {
    extend: {
      screens: {
        huge: '2000px',
      },
    },
  },
};

The extend portion and adding an additional breakpoint. You can add a breakpoint to the grid by adding a screens object to the extend object. Screens is the name of the object that holds the definition of the Grid Tailwind Uses.

Changing

module.exports = {
  theme: {
    extend: {},
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
};

If you want to change the definitions of objects, just add them as objects inside the theme. This here is the definition for all of the breakpoints in tailwinds. You could change the name of a breakpoint here, or delete breakpoints you dont' want Tailwind CSS to know about.