mijin

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

View Demo View Github

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
  1. 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',
    ],
  },
};
  1. 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',
  ],
...