huang-x-h / mijin

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

• 📖 Documentation

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

📖  Read more

Support

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

Contributing

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.