Mijin - Tailwind CSS UI Components Build for Vue & Nuxt

Tailwind CSS is a utility-first CSS framework stuffed with classes like flex, pt-4, text-center, and rotate-90 that can be used to build any design, directly in your markup. It offers utility classes that assist you to work within the constraints of a system instead of littering your stylesheets with arbitrary values. Tailwind CSS makes it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.

Léonard Lecouey Introduced a package that includes a comprehensive set of Tailwind CSS UI components build for Vue.js 2.x and Nuxt.js 2.x. So you can easily utilize these built-in UI components in your application.

Features

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

Requirements

• Tailwindcss version >= 2.0 must be already present in your application.
• Nuxt.js 2.x
• Vue.js 2.x

Getting Started

After the installation, you have to add Mijin dependency to your project.

Npm

npm install mijin tailwindcss --save-dev

Yarn

yarn add mijin tailwindcss --dev

Next, you have to 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',
    ],
  },
};

After the configuration, you’ve to 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',
  ],

Customization

Mijin provides minimal customizations to focus on usability. Yet, the default theme setting can be overridden to give a specific aspect to the UI. Mijin comes with its Tailwind CSS presets. You can easily override these Tailwind CSS presets from your tailwind.config.js file:

// tailwind.config.js
const mijin = require('mijin/tailwind-preset.js');
const { colors, borderRadius } = require('tailwindcss/defaultTheme');
module.exports = {
  presets: [
    mijin,
  ],
  theme: {
    extend: {
      // override a component border-radius
      borderRadius: {
        button: borderRadius.sm,
        form: borderRadius.sm,
      },
      // override a color
      colors: {
        primary: colors.pink,
      },
    },
  },
};

There are many more amazing features & components in Mijin. If you want to utilize this in your project you should view its whole documentation on its Official Website or Github.