Instant supports Tailwind's utility CSS classes to every block in your project, along with support for the Tailwind config file.
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
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.
npx instant add tailwindcss
yarn instant add tailwindcss
pnpm instant add tailwindcss
VS Code Extensions
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:
Install the Tailwind Intellisense VSCode extension by searching for "Tailwind Intellisense" in the VSCode Extension Marketplace.
Now, when you open a
.jsfile 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.