TailwindCSS breakpoints

Use the TailwindCSS breakpoints within javascript code.

Parameters

import { useBreakpointTailwindCSS } from "vue-composable"; useBreakpointTailwindCSS(tailwindConfig?); 

Parameters	Type	Required	Default	Description
tailwindConfig	tailwind.config.js	false	undefined	tailwind.config.js object

Usage

Check useBreakpoint for more detailed usage

Default

import { useBreakpointTailwindCSS } from "vue-composable"; /** * it uses the default config found : * https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js **/ useBreakpointTailwindCSS(); 

With custom tailwind.config.js

// tailwind.config.js module.exports = { theme: { screens: { mobileS: "320px", mobileM: "375px", mobileL: "425px", tablet: "768px", laptop: "1024px", laptopL: "1440px" } }, variants: { /* custom variants */ }, plugins: [ /* custom plugins */ ] }; // usage import { useBreakpointTailwindCSS } from "vue-composable"; import tailwindConfig from "@/tailwind.config.js"; // location may be different useBreakpointTailwindCSS(tailwindConfig); /* Equivalent as: useBreakpoint({ mobileS: 320, mobileM: 375, mobileL: 425, tablet: 768, laptop: 1024, laptopL: 1440 }) */ 

Usage with inject/provide with typescript

// parent.component.vue import { ExtractTailwindScreens, useBreakpointTailwindCSS } from "vue-composable"; import tailwindConfig from "@/tailwind.config.js"; // location may be different export type TailwindConfigType = typeof tailwindConfig; setup(){ setBreakpointTailwindCSS(tailwindConfig); // provide config // ... } // child.component.vue import { TailwindConfigType } from 'parent.component.vue' // you should move this type to an other file setup(){ useBreakpointTailwindCSS<TailwindConfigType>() // retrieve breakpoints // ... }