Tailwind Breakpoints

Custom breakpoints can be added such as for the WordPress admin bar breakpoint, or for a main-menu breakpoint.

This is the default Tailwind CSS breakpoints: https://github.com/tailwindlabs/tailwindcss/blob/fd500fcd0c45bd...

In the example below, three new breakpoints have been added (adminbar, menu, 3xl):

   screens: {
     sm: '640px',
     md: '768px',
     adminbar: '783px',
     menu: '850px',
     lg: '1024px',
     xl: '1280px',
     '2xl': '1536px',
     '3xl': '1800px'
   },

Note: The breakpoints must be in order, so for example if menu is greater than lg then it would need to be moved down.

Using breakpoints in tailwind.css

It can be useful to refer to breakpoints in the tailwind.css style sheet like so:

@media screen(md) {
  /* Add CSS here*/
}