🚀 Just shipped a new release of the Tailwind CSS IntelliSense plugin for
@code
that adds Tailwind-specific linting for both your markup and CSS!
It’s also the first release as an official first-party Tailwind CSS project 🥳
Read more about it here 👉
I’ve been working on JIT support for Tailwind CSS IntelliSense this week. Look at all those variants! 😍 The order matters, so selecting an autocomplete suggestion will rearrange them into the right order for you
🎉 Big day today — it's
@bradlc
's first day as part of the Tailwind team!
You might recognize him as the author of the amazing Tailwind Intellisense plugin for VS Code 👏
Brad has been building awesome Tailwind stuff since we released v0.1.0 and we couldn't be more excited 🥳
Here’s another preview of the linting feature we’re working on for
@tailwindcss
@code
. Trying to make the messages as helpful as possible, and of course these all come with automatic “quick fixes,” if you’re in to that sort of thing 💡
Sneaked out a little Tailwind CSS IntelliSense update at the end of last week 👀 The extension now includes full support for JIT mode! ✨ Install or update now to check it out:
Something that often catches people out is that (at least for now) Tailwind’s @apply feature cannot be used with certain class names, which is why it’s one of the lint rules we’re working on this week for the
@code
extension. Automatic quick fix included! 💡
@WillKnowThat
@adamwathan
In the video I am using ctrl+space to manually trigger it. In HTML documents it should trigger automatically on the first letter fine, but setting the `editor.quickSuggestions.strings` option to `true` can improve triggering in some cases, like when using JSX.
Video alt: Tailwind’s arbitrary value support is used in a HTML document to create a CSS gradient background. The colour stops are edited using VS Code’s built-in colour picker. The resulting gradient is shown in a preview panel and updates as the values change.
@adamwathan
@_BrianKimball
@tailwindcss
🙌 I was just playing around with that project really, although it does work well. It’s a bit stale now. I did some nice updates that I’ve been meaning to publish, like the Styled Components-style syntax I showed you: tw.button`bg-red` – and a “tw” prop 👀
This has been incredible for my productivity with Tailwind (which was already great!). No more "what did I call it again?" and having to check my config.
@adamwathan
@codesandboxapp
@tailwindcss
Yep, basically that! If the referrer is a sandbox it reads the tailwind.js (e.g. ), runs PostCSS, and serves the compiled CSS. Otherwise it just serves the CSS based on the default config
Small preview from the
#StateOfCSS
survey results: green is people who would use a technology again, red is those who wouldn’t.
(Size of circle corresponds to total number of people who have used a technology)
@adamwathan
@_BrianKimball
@tailwindcss
I do like your approach though! The goal with my babel plugin was to mimic the traditional Tailwind authoring experience exactly, but in JS
@cossssmin
@github
@code
Sweet, glad you find it useful! There's a couple of alpha releases on there which you can install manually. It's not possible to distribute pre-releases on the marketplace yet unfortunately. Planning to release an new version on there soon though.