Tailwind CSS UI components build for Vue.js / Nuxt.js

mijin

Tailwind CSS UI components build for Vue.js 2.x / Nuxt.js 2.x

Features

• ? Component style relying uniquely on Tailwind CSS presets classes
• ? Responsive
• ? Support dark and light mode
• ?️ No dependencies

Getting Started

tailwindcss version >= 2.0 must be already present in your application

1. Add mijin dependency to your project

# using npm
npm install mijin tailwindcss --save-dev
# using yarn
yarn add mijin tailwindcss --dev

2. Add mijin Tailwind CSS preset tailwind-preset.js to your Tailwind CSS configuration file tailwind.config.js

// tailwind.config.js
const mijin = require('mijin/dist/tailwind-preset.js');

module.exports = {
  // load mijin presets
  presets: [
    mijin,
  ],
  // allow PurgeCSS to analyze mijin components
  purge: {
    content: [
      'node_modules/mijin/src/components/**/*.vue',
    ],
  },
};

3. Load the plugin in your vue application

Vue.js

import Vue from 'vue'
import Mijin from 'mijin'

Vue.use(Mijin)

// or load specific components

import {
  Button
  Input,
  // ...
} from 'mijin'

Vue.component('MjButton', Button)
Vue.component('MjInput', Select)

Nuxt.js

Add mijin.js file to your plugins directory

// plugins/mijin.js
import Vue from 'vue';

Vue.use(Mijin)

Load the plugin from nuxt.config.js

// nuxt.config.js
...
  plugins: [
    '~/plugins/mijin.js',
  ],
...