1. vue-cli-plugin-tailwind
vue-cli plugin for Tailwind CSS
vue-cli-plugin-tailwind
Package: vue-cli-plugin-tailwind
Created by: forsartis
Last modified: Mon, 23 May 2022 13:10:51 GMT
Version: 3.0.0
License: MIT
Downloads: 47,181
Repository: https://github.com/forsartis/vue-cli-plugin-tailwind

Install

npm install vue-cli-plugin-tailwind
yarn add vue-cli-plugin-tailwind

vue-cli-plugin-tailwind

Tailwind CSS
License

A plugin that adds Tailwind CSS to your vue-cli project.

Getting started

Inside your vue-cli project folder add the plugin via:

vue add tailwind

Choose what Tailwind config you want to generate:

  • none - Won't create a config file. Useful if you already have a config (make sure to configure PurgeCSS).
  • minimal (default) - Will create a minimal tailwind.config.js file where you can define your customizations.
  • full - Will generate a tailwind.config.js file containing the entire default configuration.

See Tailwinds configuration guide for more info.

PostCSS Configuration

Tailwind CSS will be added as plugins in your PostCSS config.

 // postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin