vscode-css-languageservice VS Tailwind CSS

I have setup vscode-css-languageservice (LSP Server) with Neovim (see here and here).

It is recommended to use css/less/scss as the language for , because these are based on vscode-css-language the service provides reliable language support;

If using postcss/stylus/sass, additional syntax highlighting extensions need to be installed. postcss uses language-postcss, stylus uses language-stylus extension, sass uses Sass extension;

Volar does not contain ESLint and Prettier, while the official ESLint and Prettier extension supports Vue, so you need to install it yourself.

2. Vue VSCode Snippets

🔥 1.52 million downloads+

Vue VSCode Snippets extension aims to provide developers with the easiest and fastest way to generate Vue code snippets, through various shortcuts key to quickly generate various code snippets in .vue files. It is simply a must-have artifact for Vue3 development.

This extension supports: Volar, Vue2 and Vue3.

It is used as follows:

• Create a .vue file and enter vbase to prompt the generated template content:

• Type vfor to quickly generate a v-for command template:

• Type v3onmounted to quickly generate the onMounted lifecycle function:

Others will not be demonstrated anymore. The functions are too powerful, and there are many commonly used shortcut keys. For details, you can check the document.

3. Auto Close Tag

🔥 7.69 million downloads+

The Auto Close Tag extension is a great VS Code extension that has a big impact on productivity. As the name suggests, when we type the closing bracket in the closing tag, it will add the closing tag. It supports HTML, Handlebars, XML, PHP, Vue, JavaScript, Typescript, JSX and more.

4. Vue Peek

🔥 490k+ downloads

Vue Peek Extension is used to expand the Vue code editing experience, allowing us to quickly jump to the files defined by components and modules.

It is used as follows:

• Right-click the component label to jump to the component definition file:

• Right-click the component label, and a pop-up window displays the file defined by the component:

5. Vue Theme

🔥 340k downloads+

Vue Theme extension provides a good Vue theme, and also supports configuring different colors, which feels pretty good.

6. Vite

🔥 89k+ downloads

The Vite extension allows us to automatically start the development server after opening the project, allowing developers to preview and debug the application without leaving the editor . Support one-click to start, build and restart projects.

Summarize

The 6 extensions shared today can be installed and used as needed.

I highly recommend Practical Volar and Vue VSCode Snippets These 2 extensions.
If you think it's good, please like and support. 👍

If you have a better extension, welcome to comment and share~🔥

✨follow me：https://medium.com/@Chris1993

Lastly, Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

Tailwind CSS

Sidekiq is already configured along with assets, tailwindsCSS.

Finally, for our front end, we’re going to be pairing Next.js with the great combination of TailwindCSS and shadcn/ui so we can focus on building the functionality of the app and let them handle making it look awesome!

You can use any frontend framework you want — react-based tooling, however, has a natural advantage as it models everything as a function of state, which can map 1:1 with the concept in Burr. In the demo app we use react, react-query, and tailwind, but we’ll be skipping over this largely (it is not central to the purpose of the post).

Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

First, you need to make sure that you have a working Tailwind CSS project…

Tailwind CSS

With better CSS approaches like TailwindCSS and Vanilla Extract (which we're heavily using) it's much easier to maintain the UI and make sure it doesn't change unexpectedly. No more conflicting CSS classes, much less CSS specificity issues and much less CSS code in general.