Customizing Screens - AstroLaunch UI

Customize the default Breakpoints for AstroLaunch UI and add your own custom breakpoints that you like to have for your project.

AstroLaunch UI provides a set of default breakpoints for different screen sizes that you can use.

const boxShadow = {
  sm: "540px",
  md: "720px",
  lg: "960px",
  "lg-max": { max: "960px" },
  xl: "1140px",
  "2xl": "1320px",
};

You can customize the default breakpoints for AstroLaunch UI very easy and straightforward, it's the same as customizing breakpoints for tailwindcss.

You just need to customize the breakpoint that you like through the screens object for tailwind.config.js file.

module.exports = withMT({
  theme: {
    screens: {
      sm: "640px",
      // rest of the breakpoints
    },
  },
});

You can add new breakpoint for AstroLaunch UI very easy and straightforward, it's the same as adding new breakpoint for tailwindcss.

You just need to add your own breakpoint to the extend and screens object for tailwind.config.js file.

module.exports = withMT({
  theme: {
    extend: {
      screens: {
        "3xl": "1600px",
      },
    },
  },
});

If you want to see more examples and properties please check the official Material Tailwind Documentation.