Blog Detail

1

Oct
Mijin - Tailwind CSS UI Components Build for Vue & Nuxt cover image

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.

Published at : 01-10-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project