Vue-Tailwind

For more info check the official site: https://vue-tailwind.com/

VueTailwind is a set of Vue components created to be customized to adapt to the unique design of your application.

It uses TailwindCss classes by default, and all classes are configurable, that give you total control of how the components will look like.

No more Bootstrap like sites, you just need to configure your theme classes once and all set.

Install and use

1. Install the dependencies

npm install vue-tailwind --save

Or:

yarn add vue-tailwind

::: tip If you using the default theme you need to install TailwindCSS first :::

2. Configure your project to use vue-tailwind

2.1 Do nothing if you want to use our default theme:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

Vue.use(VueTailwind)

2.2 Or better yet, create your own theme:

Let's say, for example, that for the specific needs of your project the text inputs should have a blue two width border instead of the default border, the button should has more rounded borders, and the primary button should be purple.

::: tip

Notice that you don't need to set all the classes settings, just the ones you want to override from src/themes/default.js

:::

// `./myOwnTheme.js`
const TInput = {
  // Notice that this will override the full `baseClass` setting so probably you want to keep some
  // of the clases and just replace the ones you want to override.
  // baseClass: 'border block w-full rounded',
  baseClass: 'border-2 border-blue-500 block w-full rounded',
}

const TButton = {
  // baseClass: 'border block rounded inline-flex items-center justify-center',
  baseClass: 'rounded-lg border block inline-flex items-center justify-center',
  // primaryClass: 'text-white bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600',
  primaryClass: 'text-white bg-purple-500 border-purple-500 hover:bg-purple-600 hover:border-purple-600',
}

const MyOwnTheme = {
  TInput,
  TButton,
}

export default MyOwnTheme

Finally, add your custom theme when you install VueTailwind:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import MyOwnTheme from './myOwnTheme.js'

Vue.use(VueTailwind, {
  theme: MyOwnTheme
})

Another option is to set the settings directly, check at this example:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const TInput = {
  baseClass: 'border-2 border-blue-500 block w-full rounded',
}
// Or create a separate file like `src/themes/default/TInput.js` and import it
// import TInput from './myOwnTInput'
Vue.use(VueTailwind, {
  theme: {
    TInput
  }
})
// Or why not define the settings inline:
Vue.use(VueTailwind, {
  theme: {
    TInput: {
      baseClass: 'border-2 border-blue-500 block w-full rounded',
    }
  }
})

3. (Optional) configure purgecss

Using purgecss postcss plugin? Add your theme file to the postcss config (or if you using the default theme add the theme path):

// postcss.config.js (from https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss)
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    // ...Default config
    // Your custom theme file:
    './myOwnTheme.js',
    // Or the default 
    // './node_modules/vue-tailwind/src/themes/default.js'
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

Install only the components you need

If you want to reduce the bundle size by importing only the components you need you can do it by importing the component directly and registering it like this:

import TInput from 'vue-tailwind/src/elements/TInput.vue'
import TAlert from 'vue-tailwind/src/components/TAlert.vue'

  Vue.use(TInput, {
  successStatusClass: 'border-green-600 bg-green-300 text-white',
})

Vue.use(TAlert, {
  baseClass: 'border-2 p-3 relative flex',
})

* Notice that you can pass the classes you want to override as you do when importing the full library.

** Also notice that the form inputs are in the src/elements/ path and the components in src/components/ path.

You can also import the component from another custom component but in that case, you currently can't override the default theme, still, you can set the classes by using the props though, look at this example:

<template>
<div>
  <t-input :success-status-class="border-green-600 bg-green-300 text-white" >
</div>
</template>

<script>
import TInput from 'vue-tailwind/src/elements/TInput.vue'
export default {
  components: {
    TInput
  }
}
</script>

What's next?

The idea is to create a big set of common components using the same philosophy: Configurable elements that could be adapted to your project style:

For now, these are the priorities, of course are subject to change.

Basic inputs

• Text input
• Textarea
• Select
• Radio
• Radio Group
• Button
• Checkbox
• Checkbox Group
• File input

Rich inputs

• IN PROGRESS Rich Select (tagging, autocomplete, remote data sets, etc.)
• Date/Time Picker
• Rich file input (drop, multiupload, progress bar, etc)

Components

• Alert
• Card
• Dropdown
• InputGroup
• NEW Table
• NEW Pagination
• NEW Modal
• IN PROGRESS Pagination Nav
• IN PROGRESS Dialogs
• Tooltip
• Progress bar

More features

• Table filter, pagination & sorting
• Send your feature requests

More

• Once we have a reasonable amount of components I'm also planning:
  • Create some more default themes
  • Improve the documentation with better playgrounds
  • Create a theme editor. (And maybe a "submit your theme" page)
  • Add more features to the components

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Do you like this project? Contribute! Any help is welcome. (I'm not an English speaker so also any comments on my redaction are welcome).

Is this project helpful for you? Consider buying me a coffee to keep me awake.

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email alfonso@vexilo.com instead of using the issue tracker.

Credits

• Alfonso Bribiesca
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Made with love by @alfonsobries