From c1c1c853496b268ea9cd680a5b960d408746ee31 Mon Sep 17 00:00:00 2001 From: Kyle Coburn Date: Tue, 26 Feb 2019 12:46:02 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Class=20bindings=20object=20synt?= =?UTF-8?q?ax=20caveat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 45aa670..5bc3ed5 100644 --- a/README.md +++ b/README.md @@ -47,3 +47,4 @@ Any CSS class that isn't used inside your `.html` files in `public/`, or by your - By default, any class you name `.*-move` will be whitelisted and always included in your output CSS. This is required to support ``'s [generated classnames](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions). 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 `` with `name="cursor"`, as this will generate `.cursor-move` which will inherit [TailwindCSS's cursor class](https://tailwindcss.com/docs/cursor/). +- Using the object syntax class bindings requires quotation marks around class names, i.e. `:class="{ 'active': isActive }"`, because `:` is a valid character in CSS selectors.