ky-is / vue-cli-plugin-tailwind Goto Github PK

View Code? Open in Web Editor NEW

84.0 84.0 3.0 117 KB

Utility-first, modern CSS for your Vue app using TailwindCSS.

JavaScript 100.00%

purgecss tailwindcss vue vue-cli-plugin

vue-cli-plugin-tailwind's People

Contributors

Stargazers

Watchers

Forkers

ceafive onekiloparsec so1ar-ec1ipse

vue-cli-plugin-tailwind's Issues

postcss-purgecss remove components styling imported from the node_modules

It looks like the configuration of the @fullhuman/postcss-purgecss plugin in postcss.config.js remove the style used from node_modules components such as Epic Spinners or Vue Good Table.

For example, my production build doesn't have the styling of the table plugin (Vue Good Table). I removed a bit of the code generated by this vue-plugin in postcss.config.js and it worked well after, both in development and production:

/* eslint "global-require": "off" */
/* eslint "import/no-extraneous-dependencies": "off" */
const IN_PRODUCTION = process.env.NODE_ENV === 'production';

class TailwindVueExtractor {
  static extract(content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '');
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_:/]+/g) || [];
  }
}

const extensionsUsingCSS = ['vue', 'html'];
const extensionsOfCSS = ['css', 'less', 'pcss', 'postcss', 'sass', 'scss', 'styl'];

module.exports = {
  plugins: [
    require('postcss-preset-env')({ stage: 2 }),
    require('tailwindcss')('./tailwind.config.js'),
    // IN_PRODUCTION && require('@fullhuman/postcss-purgecss')({
    //   content: [`./@(public|src)/**/*.@(${extensionsUsingCSS.join('|')})`],
    //   css: [`./src/**/*.@(${extensionsOfCSS.join('|')})`],
    //   extractors: [
    //     {
    //       extractor: TailwindVueExtractor,
    //       extensions: extensionsUsingCSS,
    //     },
    //   ],
    //   whitelist: [],
    //   whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
    // }),
    require('autoprefixer')(),
  ],
};

@apply issue in component

After installing the plugin using Vue CLI, inline class names work as expected but trying to use @apply with the shadowLookup I get the following error:

(12:5) @apply cannot be used with .container because .container either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .container exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

<template>
    <div class="main">
        <div class="border border-grey p-3 rounded">
            <!-- Style applies fine inline -->
        </div>
    </div>
</template>

<style lang="postcss" scoped>
    .main {
        @apply container mx-auto flex justify-center;
    }
</style>

how to use responsive prefixes?

Sorry this is maybe a stupid question, but I couldn't figure out it on my own yet, and couldn't find anything about it online.

So what I want to do is to make responsive prefixes (for example: sm:classname md:classname etc.)

Thanks for you help in advance. 👍

Rule conflict with Airbnb "'tailwindcss' should be listed in the project's dependencies. Run 'npm i -S tailwindcss' to add it"

const { colors } = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        extend: {
            colors: {
                'hn-orange': '#ff6600',
            },
        },
    },
};

'tailwindcss' should be listed in the project's dependencies. Run 'npm i -S tailwindcss' to add it

It's not clear exactly is wrong here. Does vue-cli-plugin-tailwind forget to install tailwindcss too or is it by design that we need to also add that?

Update docs to mention SASS/SCSS v-deep selector

This might not be the right place for it, but at least there will be an issue for it for others googling around.

After I applied all the changes from #6, my custom scoped styling was still being purged.
I fixed this by adding whitelistPatternsChildren: [/^::v-deep/].

Am I doing something wrong or is this the only way to get scoped deep selectors to work?

Edit: here's my final postcss.config.js file, including a custom library.

module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {
      content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.scss',
        './node_modules/flickity/css/*.css'
      ],
      defaultExtractor: content => {
        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
        return contentWithoutStyleBlocks.match(/[\w-/:]+(?<!:)/g) || []
      },
      whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!cursor-move).+-move$/, /^router-link(|-exact)-active$/],
      whitelistPatternsChildren: [/^::v-deep/]
    }
  }
}

Build fails with beta 1

First, Thank You for this awesome piece of software! 👍

After upgrading to beta 1 my builds fail but dev env works normally. When I copied the old postcss config back, everything works again.


Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: The extractor has failed to extract the selectors.
[...] 
 @ ./src/main.js 8:0-42
 @ multi ./src/main.js

I'm using mainly SASS in my .vue files (indented syntax) and just one .postcss file that is imported in main.js. Latest vue-cli, latest everything basically. Don't really see where the actual problem is, but as the build works with the older config file it works as a workaround for me for now.

IDE Autocomplete Support

Hey I love the plugin, posting this issue to maybe get some insight from other users. I am trying to find a way to add IDE auto complete via this plugin, when using tailwind vanilla in vue I just generate a tailwind.css file (or download from CDN) and just leave it in the root for my IDE to pick up. Wondering if anyone has another solution

Comparison with forsartis/vue-cli-plugin-tailwind

Hi, found your plugin via https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475

Are you aware of differences (beside documentation) between this plugin and https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475 ?

Thanks!

Add license?

Please consider adding a license to your code, so that developers looking to use it know the terms of that use.

A popular and common license you could consider would be: https://mit-license.org/

BrowserslistError: Unknown browser query `android all`

After installing vue-cli-plugin-tailwind in a fresh vue-cli app, I get repeated BrowserslistError: Unknown browser query android all`` while building.

BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`
BrowserslistError: Unknown browser query `android all`

$ vue --version
3.8.4

  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "@ky-is/vue-cli-plugin-tailwind": "^2.0.0",
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-e2e-nightwatch": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-typescript": "^3.8.0",
    "@vue/cli-plugin-unit-jest": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "postcss-preset-env": "^6.6.0",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "tailwindcss": "^1.0.1",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }

[Compatibility issue] PurgeCSS kicks in too often

Hi,

We'd been having a problem with Storybook and using your tailwind project by where on the initial running of the tool all css would work.

Then as we added new classes onto elements, the styling never applied, and the source code never had class in it.

We assumed this was to do with the purge.

Checking out the postcss.config.js we noticed

const isHotReloaded = process.argv.includes('serve')

This would then run purge.

This is pretty problematic when interfacing with other tools that do not pass in a serve argument.

Typically you'd only run that process when the NODE_ENV is set to production that way all the tools stay in sync.

I've submitted a PR with a potential change if you're interested :)

Adding custom CSS

As per the Tailwind docs I'm trying to add some heading theming between
@import '~tailwindcss/base.css';
and
@import '~tailwindcss/components.css';

Something like this:

// custom.css
h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600 underline;
}

Tried inlining and also importing the file from the styles ( tailwind.postcss parent) directory which did not work. What should I be doing here?

Use @fullhuman/postcss-purgecss v2.x.x

v2.x is out https://github.com/FullHuman/purgecss/releases