Numbers Probably Matter

    @ky-is/vue-cli-plugin-tailwind

    2.0.0 • Public • Published

    vue-cli-plugin-tailwind

    Tailwind CSS's utility classes are minned by Purgecss, saving hundreds of kBs in production builds. postcss-preset-env polyfills modern CSS standards based on your browserslist configuration.

    Install

    TailwindCSS v1.0

    vue add @ky-is/tailwind

    When the plugin is updated, you can upgrade your configuration with:

    vue invoke @ky-is/tailwind

    TailwindCSS v0.x

    See the tailwind-0.x branch.

    Usage

    Use inline classes, or @apply. For example, in src/components/HelloWorld.vue of the auto-generated cli app:

    <style lang="postcss" scoped>
    h1 {
      @apply text-purple-500 flex;
    }
    </style>

    Applies scoped, browser-prefixed CSS, while PurgeCSS strips all other unused classes, including the thousands generated by Tailwind.

    Configuration

    postcss.config.js Plugins

    • postcss-preset-env: Defaults to stage 2, as these draft proposals are considered reasonably stable. If you want to enable handy experimental features like nested classes (a { &:hover: {...} }), change to stage: 0. You can safely delete this plugin from the list if you only write old CSS or use another preprocessor.

    • @fullhuman/postcss-purgecss: Purgecss removes all CSS classes that it can't find reference to. By default, all Vue and style files in the src folder are included. Adjust content array if you have CSS classes in other files. Add class names to the whitelist array you want to manually prevent PurgeCSS from removing if it thinks they're unused.

    Whitelisting

    Any CSS class that isn't used inside your .html files in public/, or by your .vue components (outside of the <style> block where they're defined) in src/ will be stripped by PurgeCSS by default, because with it doesn't have a way to know that those classes are being used out-of-the-box.

    3rd-party CSS

    If you're importing CSS from a 3rd-party library, you'll need to add its source files to PurgeCSS's search paths in postcss.config.js via the content array so it knows they're in use, or whitelist the imported classnames so they're never purged. As an example, vue-good-table requires importing its bundled CSS classes. There's two approaches to ensure its classes aren't purged from your production builds:

    • Add './node_modules/vue-good-table/src/**/*.vue' to the content array (so PurgeCSS sees these classes being used)

    Or:

    • Add /^vgt-/ to the whitelistPatterns array (as this library prefixes its class names with .vgt-*)

    Check your production build

    The first time you build for production after major changes, it's always a good idea to check the output CSS to ensure PurgeCSS is configured correctly for your project. Look over the CSS files in dist/, or spin up your production build on localhost with a tool like serve:

    npm install --global serve
    cd yourproject
    serve -s dist

    Caveats

    • Don't reference class names by string concatination, as PurgeCSS cannot find them. Don't: text-${error ? 'red' : 'green'}-600. Do: error ? 'text-red-600' : 'text-green-600'.
    • By default, any class you declare that matches .*-move will be whitelisted and always included in your output CSS. This is required to support <transition-group>'s generated classnames. You can change whitelistPatterns in postcss.config.js if you don't want this behavior.
    • Any time you're using TailwindCSS and Vue, be careful not to define a <transition-group> with name="cursor", as this will generate .cursor-move which will inherit TailwindCSS's cursor class.
    • If you use any custom characters in your css classes beyond / and : (which are required for TailwindCSS), you need to add them to the default regex pattern /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g.

    Keywords

    none

    Install

    npm i @ky-is/vue-cli-plugin-tailwind

    DownloadsWeekly Downloads

    712

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    10 kB

    Total Files

    7

    Last publish

    Collaborators

    • kyis