musfirotus/vue-template

vue-tailwind-axios

Template Package

• Vue Router
• Vuex
• Tailwindcss
• Axios
• Nprogress

vscode config for tailwind

1. extension
   Tailwind CSS IntelliSense
2. vscode config

   "tailwindCSS.includeLanguages": {
       "plaintext": "html"
   },
   "css.validate": false,

Tailwindcss Install

1. Install Tailwindcss

   npm install tailwindcss
   

2. Install postcss

   npm install @fullhuman/postcss-purgecss
   

3. tailwind init

4. Tambahkan index.css pada src/assets/styles/index.css dengan isi :

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   .btn{
       @apply bg-red-500 text-white;
       padding:5px;
   }

5. buat file postcss.config.js pada root project yang isinya:

   const autoprefixer = require('autoprefixer');
   const tailwindcss = require('tailwindcss');
   const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
   
   const purgecss = postcssPurgecss({
   // Specify the paths to all of the template files in your project.
   content: [
       './public/**/*.html',
       './src/**/*.vue',
   ],
   // Include any special characters you're using in this regular expression.
   // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
   // Whitelist auto generated classes for transitions and router links.
   // From: https://github.com/ky-is/vue-cli-plugin-tailwind
   whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
   });
   
   module.exports = {
   plugins: [
       tailwindcss,
       autoprefixer,
       ...process.env.NODE_ENV === 'production'
       ? [purgecss]
       : [],
   ],
   };

6. import pada main.js

   import '@/assets/styles/index.css';

Customize configuration

See Configuration Reference.