Style Library - Tailwind

Tailwind is a style library that is similar to Bootstrap. It also uses class names to specify styles but the difference is that the structure of class names in Tailwind is similar to that of the native CSS style. So if you have knowledge of how to use CSS, then learning how to use Tailwind is rather easy.

Setting Up Tailwind

Run the command below in the project console

npm install -D tailwindcss
npx tailwindcss init

Add path to the content in the config file

content: ["./src/**/*.{html,js}"]

Add the codes shown below to the main CSS file

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

Plug-Ins

Another advantage Tailwind offers is that it has a variety of plug-ins

Daisy UI

Run the command below in the project console

npm i daisyui

plugins: [require("daisyui")]

So far we have seen how to use Tailwind.

---

References

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Installation - Tailwind CSS

Installation - Tailwind CSS

daisyUI — Tailwind CSS Components

daisyUI — Tailwind CSS Components