Skip to content
Switch branches/tags


Version Downloads License Coverage Status semantic-release


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


  • 💅 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: [
  // allow PurgeCSS to analyze mijin components
  purge: {
    content: [
  1. Load the plugin in your vue application


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


// or load specific components

import {
  // ...
} from 'mijin'

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


Add mijin.js file to your plugins directory

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


Load the plugin from nuxt.config.js

// nuxt.config.js
  plugins: [

📖  Read more


Bug report

If you see an error message or run into an issue, please create a bug report, this effort is valued and it will help everybody.

Create bug report

Feature request

If you're missing a component or want to add a new feature, please submit a request. If a similar feature request already exists, don't forget to leave a "+1". Adding some information about the feature will be embraced warmly.

Submit feature request


Mijin is an open source project. We are committed to a fully transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the community.

Please refer to our contribution guidelines.