How to access Tailwind breakpoints/screens from React

[Svish]

I'd like to be able to "react" to breakpoint changes in my app, and I would like those breakpoints to equal the ones configured in Tailwind.

I can use createBreakpoint from react-use to create the hook quite simply, but how do I access the Tailwind theme/configuration from React?

Is there a "best practice" way to do this?

[ryanfitzer]

If you're using the default screen sizes, you can import them:

const defaultTheme = require('tailwindcss/defaultTheme');

console.log(defaultTheme.screens);

If you've customized them, you can import your config:

const customConfig = require('./tailwind.config');

console.log(customConfig.theme.screens);

[Svish]

Thanks! That made it super clear and helped a lot. Would be great if that was noted somewhere in the documentation. Although, even better would be if there was a @tailwindcss/react package or something with a few helpful functions and hooks for common utility things like these.

Anyways, for anyone else looking for this, this is how I did it with react-use:

import { createBreakpoint } from 'react-use';
import tailwind from '../../tailwind.config';

export const breakpoints = {
  phone: 0,
  tablet: Number.parseInt(tailwind.theme.screens.tablet),
  laptop: Number.parseInt(tailwind.theme.screens.laptop),
  desktop: Number.parseInt(tailwind.theme.screens.desktop),
};

const useBreakpoint = createBreakpoint(
  breakpoints
) as () => keyof typeof breakpoints;

export default useBreakpoint;

[Svish]

⚠ Just noticed doing it this way will (most likely) pull a lot of code into your client build that you might not want there. So... I decided to pull those numbers out into a separate file instead:

// tailwind.screens.js
module.exports = {
  tablet: '640px',
  laptop: '1024px',
  desktop: '1280px',
};

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    screens: require('./tailwind.screens.js'),
  },
  // ...
};

// src/util/useBreakpoint.ts
import { createBreakpoint } from 'react-use';
import screens from '../../tailwind.screens';

export type Breakpoint = keyof typeof breakpoints;
export const breakpoints = {
  phone: 0,
  tablet: Number.parseInt(screens.tablet),
  laptop: Number.parseInt(screens.laptop),
  desktop: Number.parseInt(screens.desktop),
};

const useBreakpoint = createBreakpoint(breakpoints) as () => Breakpoint;
export default useBreakpoint;

[Heath459]

Here's what I wrote in Typescript that returns the current breakpoint based on device width. You can place it in a standalone file and import the methods whenever needed in any file:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config.js'; // Fix the path

const fullConfig = resolveConfig(tailwindConfig);

export const getBreakpointValue = (value: string): number =>
+fullConfig.theme.screens[value].slice(
0,
fullConfig.theme.screens[value].indexOf('px')
);

export const getCurrentBreakpoint = (): string => {
let currentBreakpoint: string;
let biggestBreakpointValue = 0;
for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
const breakpointValue = getBreakpointValue(breakpoint);
if (
breakpointValue > biggestBreakpointValue &&
window.innerWidth >= breakpointValue
) {
biggestBreakpointValue = breakpointValue;
currentBreakpoint = breakpoint;
}
}
return currentBreakpoint;
};

TargetPayandBenefits

[Svish]

This would not react to changes though. And it will also pull tailwindcss into your client dependencies, which is not great.