TailwindCSS Directive for Responsive classes (SPA/SSR)

VueJS directive which gives the order to TailwindCSS classes.

Table of Contents

• WHY ⁉
  • Instead of this code (bad sample)
  • Write and read this (good sample)
• Setup
  • VueJS (Client)
  • NuxtJS
    • Client Side (SPA & Universal mode)
    • Server Side (Univeral mode)
    • PurgeCSS && @nuxtjs/tailwindcss
• Known Problems
• MIT License
• Author & Contributors

WHY ⁉

Do you like to write the your CSS using the TailwindCSS framework?

But you hate those never ending strings of classes?

Instead of this code (bad sample)

<div 
  class="w-full max-w-xl pl-6 mb-16 md:w-1/2 md:pl-16 md:md-32 lg:pl-32 xxl:w-1/4 xxl:mx-auto xxl:pl-32"
/>

Write and read this (good sample)

<div 
  class="w-full max-w-xl pl-6 mb-16"
  v-screen="{
    md: 'w-1/2 pl-16 mb-32',
    lg: 'pl-32',
    xxl: 'w-1/4 mx-auto pl-32'
  }"
/>

• Radically improve the readability of your code.
• Provides client(SPA) and server(SSR) directive
• Provides extractor and setup for PurgeCSS.

Setup

$ npm i @samuells/vue-tailwindcss-responsive-directive
or
$ yarn add @samuells/vue-tailwindcss-responsive-directive

VueJS (Client)

Create custom directive and name it "screen"

import Vue from 'vue'
import { client } from '@samuells/vue-tailwindcss-responsive-directive'

Vue.directive('screen', client)

NuxtJS

Client Side (SPA & Universal mode)

Create custom client side directive named "screen" as plugin file

// ./plugins/tailwind-screen.js
import Vue from 'vue'
import { client }  from '@samuells/vue-tailwindcss-responsive-directive'

Vue.directive('screen', client)

Server Side (Univeral mode)

// ./nuxt.config.js
import { server } from '@samuells/vue-tailwindcss-responsive-directive'

// add to setup
export default {
  ...
  render: {
    bundleRenderer: {
      directives: {
        server
      }
    }
  },
  ...
}

Not needed for SPA mode

PurgeCSS && @nuxtjs/tailwindcss

If you are using @nuxtjs/tailwindcss you have by default enabled PurgeCSS and you need to update the extractors of PurgeCSS.

// ./nuxt.config.js
import { extractor } from '@samuells/vue-tailwindcss-responsive-directive'

// add to setup
export default {
  ...
  purgeCSS: {
    extractors: () => [
      // this is original extractor ignoring vue files
      {
        extractor: class {
          static extract(content) {
            return content.match(/[A-z0-9-:\\/]+/g)
          }
        },
        extensions: ['html', 'js']
      },
      // this is special extractor for vue files
      extractor
    ]
  },
  ...
}

Known Problems

• Don't use pseudo elements and classes in directive.

<div 
  class="w-full max-w-xl pl-6 mb-16"
  v-screen="{
    md: 'hover:text-blue-300'
  }"
/>

This is an edge case which is currently in testing and we are looking for better solution.

---

MIT License

Author & Contributors

© Samuel Snopko

You can ping me on twitter.

Thx for help & brainstorming to:

• @peter9ke
• @manniL

{...💚}