By installing the website template, tailwindcss will also get installed automatically. In this guide, we will explain how to configure tailwindcss for your needs.

What is TailwindCSS? #

TailwindCSS 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.

To learn more about it, check out TailwindCSS Official Website

Installation #

If you are using tailwindcss as a part of the website template you have downloaded, chances are you might already have it installed by following the template installation guide. Otherwise, you can follow the instructions below.

1. Install tailwindcss inside your project.

npm install -D tailwindcss
# or
yarn add tailwindcss

2. Initate config & css files

npx tailwindcss init -p

This will install tailwindcss and the required files like tailwind.config.js and postcss.config.js

3. Create a CSS File

@tailwind base;
@tailwind components;
@tailwind utilities;

Learn more on the official docs