vue-cli-plugin-tailwind
vue-cli-plugin-tailwind copied to clipboard
Utility-first, modern CSS for your Vue app using TailwindCSS.
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 tostage: 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 thesrc
folder are included. Adjustcontent
array if you have CSS classes in other files. Add class names to thewhitelist
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 thecontent
array (so PurgeCSS sees these classes being used)
Or:
- Add
/^vgt-/
to thewhitelistPatterns
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 changewhitelistPatterns
inpostcss.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>
withname="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
.