Skip to main content

TailwindCSS

Instant supports Tailwind's utility CSS classes to every block in your project, along with support for the Tailwind config file.

Why Tailwind?​

Tailwind lets you use utility classes instead of writing CSS. These utility classes are mostly one-to-one with a certain CSS property setting: for example, adding the text-lg to an element is equivalent to setting font-size: 1.125rem in CSS. You might find it easier to write and maintain your styles using these predefined utility classes!

If you don’t like those predefined settings, you can customize the Tailwind configuration file to your project’s design requirements. For example, if the “large text” in your design is actually 2rem, you can change the lg fontSize setting to 2rem.

Installation​

The Instant add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren’t sure which package manager you’re using, run the first command.) Then, follow the prompts, and type “y” in the terminal (meaning “yes”) for each one.

Terminal
npx instant add tailwindcss

VS Code Extensions​

Tailwind Intellisense​

Tailwind IntelliSense Image

Tailwind Intellisense is a Visual Studio Code extension that provides autocomplete suggestions for Tailwind CSS classes in your CSS files. It allows you to easily use Tailwind CSS in your projects by providing IntelliSense-powered autocomplete suggestions as you type.

To use Tailwind Intellisense with Visual Studio Code, you will need to follow these steps:

  1. Install the Tailwind Intellisense VSCode extension by searching for "Tailwind Intellisense" in the VSCode Extension Marketplace.

  2. Now, when you open a .css, .html or .ts / .js file in Visual Studio Code, you should see autocomplete suggestions for Tailwind classes as you type. For example, if you type bg-, you should see a list of all the available background color classes provided by Tailwind.