4 VSCode Extensions to Use When Developing with Tailwind.
VSCode Extensions to Use
Photo by Andrew Neel on Unsplash
VSCode Extensions
The utility-first CSS framework Tailwind CSS has recently gained a lot of popularity. It comes with a set of predefined classes that can be used to style HTML elements quickly and effectively, making it an appealing option for developers who want to write CSS code that is clear and concise.
In this article, we'll examine four VSCode expansions that can help with further fostering your Tailwind CSS improvement work process.
1. Tailwind CSS IntelliSense.
Anyone utilizing Tailwind CSS in VSCode must install the extension Tailwind CSS IntelliSense. The expansion of clever auto-completion to Tailwind CSS classes in this update simplifies it to compose perfect and productive code.
As you type, you can see a list of the available classes and their properties with this extension, making it easier to choose the right class for your needs. One of its many benefits is the speed with which delightful plans can be executed by originators.
<!-- Using Tailwind CSS IntelliSense in HTML -->
<div class="bg-gray-100 text-center py-4">
<h1 class="text-2xl font-bold text-blue-500">Welcome to my website</h1>
<p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
/* Using Tailwind CSS IntelliSense in CSS */
.my-class {
background-color: bg-gray-100;
text-align: text-center;
padding-top: py-4;
font-size: text-2xl;
font-weight: font-bold;
color: text-blue-500;
}
.another-class {
color: text-gray-700;
}
In this example, the HTML and CSS files both make use of Tailwind CSS classes. When you write these classes, Tailwind CSS IntelliSense provides suggestions for class names based on the context of your code.
For instance, while making bg-in the HTML class attribute, IntelliSense gives thoughts to all of the open establishment assortment classes, including bg-dim 100.
2. Tailwind Color Shades.
The Tailwind Color Shades extension provides a useful function for creating color shades for Tailwind CSS classes. By selecting the appropriate tint and immersion values, you will undoubtedly be able to produce shades of any hue using this augmentation.
When working with colors in Tailwind CSS, this tool can help you produce the ideal shade quickly and effectively, saving you a lot of time.
/* Using Tailwind Color Shades */
.my-class {
/* Set the background color to the 'gray-100' shade */
background-color: bg-gray-100;
/* Set the text color to the 'blue-500' shade */
color: text-blue-500;
/* Set the border color to the 'indigo-800' shade */
border-color: border-indigo-800;
/* Set the box shadow to the 'green-300' shade */
box-shadow: shadow-lg-green-300;
}
In your stylesheets, you can make use of the extensive color palette that Tailwind CSS provides. Each shade has an interesting name that mirrors its gentility or obscurity and depends on a 9-point scale. For instance, the lightest shade of gray is gray-100, whereas the darkest shade is gray-900.
To use a color shade in your stylesheets, simply add the shade name to the color name. For example, you would compose bg-dim 400 for a foundation tone or text-dark 400 for a text tone to utilize the dim 400 shade.
3. IntelliSense for CSS class Names in HTML.
The IntelliSense expansion for HTML documents offers savvy autocompletion of CSS class names in HTML records.
When working with Tailwind CSS, this extension can be especially helpful because it automatically completes all CSS classes, making it easier to write HTML code that is clean and effective.
You will be able to quickly locate the appropriate class for your requirements and avoid typing mistakes that can impede development with this extension.
<!-- Using IntelliSense for CSS class names in HTML -->
<div class="container">
<div class="row">
<div class="col-6">
<h1 class="title">Welcome to my website</h1>
</div>
<div class="col-6">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
To style our HTML parts in this model, we utilize the Bootstrap CSS framework. IntelliSense gives ideas for all of the Bootstrap structure's potential class names while making the class property for every component.
For example, IntelliSense offers decisions for Bootstrap's all suitable compartment classes, including holder liquid and holder xl, while composing the compartment in the class property for the first div.
4. VSCode Tailwind CSS Preview.
You can see a live preview of your Tailwind CSS code within VSCode by utilizing the VSCode Tailwind CSS Preview extension.
This expansion can be especially helpful when working on complex projects that require multiple styles and components.
You can see changes to your code in real time with this extension, making it simpler to debug and improve your code while you work.
<!-- Using VSCode Tailwind CSS Preview -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
</head>
<body class="bg-gray-200">
<div class="container mx-auto py-8">
<h1 class="text-4xl font-bold text-center text-gray-800 mb-8">My Awesome Website</h1>
<div class="grid grid-cols-3 gap-4">
<div class="bg-white shadow rounded-lg p-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Feature 1</h2>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="bg-white shadow rounded-lg p-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Feature 2</h2>
<p class="text-gray-600">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="bg-white shadow rounded-lg p-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Feature 3</h2>
<p class="text-gray-600">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
You will need to have the Tailwind CSS See expansion installed in Visual Studio Code to use it. At the point when you have it presented, you can open another report and start making your Tailwind CSS code.
Just enter "Tailwind:" into the order range (by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac) to see your code. See," then pick "Tailwind: " Check out the current file."
Choosing the Right VSCode Extension.
When working with Tailwind CSS, the appropriate VSCode extensions can make a significant difference.
The four expansions referenced in this article can assist with further developing your Tailwind CSS advancement work process by giving savvy auto-completion, a variety conceal age, class name auto-completion, and live review highlights.
By utilizing these expansions, you can smooth out your advancement interaction and spotlight building excellent ventures.