The package it easy to use Tailwind CSS with Vue.
Without this package:
<div class="bg-red-500 hover:bg-purple hover:text-white sm:bg-green-500 md:bg-blue-500 md:w-3/4 lg:bg-pink-500 lg:w-2/4 xl:bg-teal-500 xl:w-1/4"> Text</div>
With this package:
<div :class="$tailwind({ default: 'bg-red-500', hover: 'bg-purple text-white', sm: 'bg-green-500', md: 'bg-blue-500 w-3/4', lg: 'bg-pink-500 w-2/4', xl: 'bg-teal-500 w-1/4' })"> Text</div>
Installation
yarn add tailwindcss-vue
# Or
npm install tailwindcss-vue
Get started
- Add
Vue.use
for the plugin.
Vue
- Use in your components. Here is a complete example:
<template> <div> <div class="bg-red-500 hover:bg-purple hover:text-white sm:bg-green-500 md:bg-blue-500 md:w-3/4 lg:bg-pink-500 lg:w-2/4 xl:bg-teal-500 xl:w-1/4"> Text </div> <div :class="$tailwind({ default: 'bg-red-500', hover: 'bg-purple text-white', sm: 'bg-green-500', md: 'bg-blue-500 w-3/4', lg: 'bg-pink-500 w-2/4', xl: 'bg-teal-500 w-1/4' })" > Text </div> </div></template>
There is another use case with the script tag (CDN version of package):
Or