Nearly-Pickled Module

    vue-windicss-preprocess
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    vue-windicss-preprocess

    A vue loader to compile tailwindcss at build time based on windicss compiler.

    Installation

    npm install vue-windicss-preprocess --save-dev

    Configuration

    Vue

    Add vue-windicss-preprocess to your webpack.config.js or vue.config.js.

    // webpack.config.js
    module.exports = {
      module: {
        rules: [
          // ... other rules omitted
          {
            test: /\.vue$/,
            use: [{
              loader: 'vue-windicss-preprocess',
              options: {
                config: "tailwind.config.js",  // tailwind config file path OR config object (optional)
                compile: false,                // false: interpretation mode; true: compilation mode
                globalPreflight: true,         // set preflight style is global or scoped
                globalUtility: true,           // set utility style is global or scoped
                prefix: 'windi-'               // set compilation mode style prefix
              }
            }]
          }
        ]
      },
      // plugin omitted
    }
    // vue.config.js
    module.exports = {
      configureWebpack: (config) => {
        config.module.rules.push({
          test: /\.vue$/,
          use: [{
            loader: 'vue-windicss-preprocess',
            options: {
              config: "tailwind.config.js",  // tailwind config file path OR config object (optional)
              compile: false,                // false: interpretation mode; true: compilation mode
              globalPreflight: true,         // set preflight style is global or scoped
              globalUtility: true,           // set utility style is global or scoped
              prefix: 'windi-'               // set compilation mode style prefix
            }
          }]
        })
      }
    }

    Nuxt

    Add vue-windicss-preprocess to your nuxt.config.js

    // nuxt.config.js
    export default {
      // ... other configurations omitted
      // Build Configuration (https://go.nuxtjs.dev/config-build)
      build: {
        extend(config) {
          config.module.rules.push({
            test: /\.vue$/,
            loader: 'vue-windicss-preprocess',
            options: {
              config: "tailwind.config.js",  // tailwind config file path OR config object (optional)
              compile: false,                // false: interpretation mode; true: compilation mode
              globalPreflight: true,         // set preflight style is global or scoped
              globalUtility: true,           // set utility style is global or scoped
              prefix: 'windi-'               // set compilation mode style prefix
            }
          })
        }
      }
    }

    Basic Usage

    You can write any tailwindcss classes in your .vue files.

    <template>
      <div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
        <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face">
        <div class="text-center space-y-2 sm:text-left">
          <div class="space-y-0.5">
            <p class="text-lg text-black font-semibold">
              Erin Lindford
            </p>
            <p class="text-gray-500 font-medium">
              Product Engineer
            </p>
          </div>
          <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {}
    </script>

    Compilation mode

    This is not css-in-js, windicss only merges and compiles the tailwind classes of each line into a new class. You can try to compile (npm run build) and check the generated css file.

    <div class="windi-15wa4me">
      <img class="windi-1q7lotv" src="/img/erin-lindford.jpg" alt="Woman's Face">
      <div class="windi-7831z4">
        <div class="windi-x3f008">
          <p class="windi-2lluw6"> Erin Lindford </p>
          <p class="windi-1caa1b7"> Product Engineer </p>
        </div>
        <button class="windi-d2pog2">Message</button>
      </div>
    </div>
    /* ... */
    .windi-1q7lotv {
      border-radius: 9999px;
      display: block;
      height: 6rem;
      margin-left: auto;
      margin-right: auto;
    }
    /* ... */
    @media (min-width: 640px) {
      /* ... */
      .windi-1q7lotv {
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0;
      }
    /* ... */

    Interpretation mode

    Interpretation mode will not modify your classes, it will only compile the original tailwind classes just like tailwindcss, but it is minimized and has native cross-browser support.

    /* ... */
    .py-8 {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
    /* ... */
    @media (min-width: 640px) {
      /* ... */
      .sm\:items-center {
        align-items: center;
      }
      .sm\:mx-0 {
        margin-left: 0;
        margin-right: 0;
      }
      .sm\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      /* ... */
    }

    Using tailwind directives

    <style global>
      .testApply {
        @apply pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7;
      }
    
      @screen sm {
        ul {
          @apply bg-gray-100 p-2 rounded-lg;
        }
      }
    </style>

    If you are using Vetur vscode extension, I believe most people are using it. You will need to add "vetur.validation.style": false to your configuration file.

    Hit ctrl-shift-p or cmd-shift-p on mac, type open settings, and select Preferences: Open Settings (JSON). Add "vetur.validation.style": false to settings.json then save it.

    Features

    • tw is an optional replacement attribute of class, The className in tw will be merged into the class attribute after compilation.

    • Group: You can also write groups in all the attributes mentioned above, such as class="font-meidum sm:hover:(font-bold bg-gray-200)". This is a native feature supported by windicss.

    • Unrestricted build: such as bg-hex-1c1c1e p-3.2 p-3rem p-4px w-10/11 bg-$custom-variable ...

    • [Using tailwind directives], such as @apply, @screen, @variants.

    • States attribute: such as sm md lg xl xxl focus hover dark ... after applid media rules then also will be merged into the class attribute. (Attributes like sm:hover are not available because they may be rarely used and slow down the parsing speed.)

    • Customize: support tailwind.config.js.

    • For more details, please refer to windicss.

    Resources

    Install

    npm i vue-windicss-preprocess

    DownloadsWeekly Downloads

    21

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    312 kB

    Total Files

    10

    Last publish

    Collaborators

    • harlan_zw
    • hannoeru
    • voorjaar
    • antfu