---
title: Helpers
description: 'Little Helpers we use'
---

## Helpers

### Get the TailwindConfig in js

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

```js{1,3-5}[checkScreenWithTailwindHelper.js]
/**
 *
 * Find out if a tailwind screen value matches the current window
 *
 * @param {string} screen
 *
 * @return {Object|Boolean}
 */

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../tailwind.config'

export const getWidth = (screens) => {
  const matches = Object.entries(screens).reduce((results, [name, size]) => {
    const mediaQuery =
      typeof size === 'string'
        ? `(min-width: ${size})`
        : `(max-width: ${size.max})`

    results[name] = window.matchMedia(mediaQuery).matches

    return results
  }, {})
  return matches
}

export const screenIs = (screen = '') => {
  // "Theme" is an alias to where you keep your tailwind.config.js - most likely your project root

  const fullConfig = resolveConfig(tailwindConfig)
  const screens = fullConfig.theme.screens
  const matches = getWidth(screens)

  // show all matches when there is no screen choice
  if (screen === '') {
    return matches
  }

  // invalid screen choice
  if (!screens[screen]) {
    console.error(`No match for "${screen}"`)

    return false
  }

  return matches[screen]
}
export default {
  screenIs,
}
```

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

```js{1,3-5}[./*example.vue]

import {screenIs} from "@/helpers/checkScreenWithTailwindHelper"

export default {
  computed: {
    screensizes() {
      return screenIs() // returns array with all defined screensizes. Todo: Check for resize
    }
  }
}

```

### Filter Methods

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.