ky-is / vue-cli-plugin-tailwind Goto Github PK
View Code? Open in Web Editor NEWUtility-first, modern CSS for your Vue app using TailwindCSS.
Utility-first, modern CSS for your Vue app using TailwindCSS.
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')(),
],
};
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>
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. ๐
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?
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/]
}
}
}
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.
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
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!
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/
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"
}
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 :)
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?
v2.x is out https://github.com/FullHuman/purgecss/releases
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.