TailwindCSS

Tailwind is used as the default UI framework, so you dont need to specify anything to use it:

import { useGrid } from 'vue-screen'

const grid = useGrid()

import VueScreen from 'vue-screen'

createApp().use(VueScreen)

However, you can also be explicit if you want to

import { useGrid } from 'vue-screen'

const grid = useGrid('tailwind')

import VueScreen from 'vue-screen'

createApp().use(VueScreen, 'tailwind')

Your grid object will contain the following properties:

{
  sm: boolean,
  md: boolean,
  lg: boolean,
  xl: boolean,
  '2xl': boolean,
  breakpoint: string | null // the current breakpoint
}

WARNING

The actual values of the properties depend on the screen size.

TailwindCSS ​