Tailwind CSS

0 0 pelajar full kasus Minggu, 25 April 2021 Edit this post

It is utility-first CSS framework for rapidly building custom designs. Best for custom designs You cannot use full power of Tailwind if yuo ...

It is utility-first CSS framework for rapidly building custom designs.

Best for custom designs

You cannot use full power of Tailwind if yuo install it using CDN. Hence if your project is highly coustomisable go for installation rather than CDN.

After initial customization through docs type below command :

npx tailwindcss build tailwind.css -o style.css

In this code we have passed tailwind.css which is css file which will get compiled and store output in another css file called style.css

Now create index.html and link style.css in it

Now you can use this framework easily by looking in documentation about font, typography, letter spacing, padding-left, padding-right, margin, border, border-weight, border color, border top, border bottom, opacity, box-shadow, weight, height, hover, focus, transition, duration, change color of placeholder, layout, custom component

If you have any class repeating then you can simply make component of that in tailwind.css file instead of repeating that class everytime.

EXAMPLE :

We have created this button as shown below. But what if we want 3 button similar to this. For this we will have to copy paste same code three times

<button class="bg-purple-800 text-white py-2 px-6 rounded">Click Me</button>

Now to avoid this we use component. Just goto tailwind.css file and type below code

.btn {

@apply bg-purple-800 text-white py-2 px-6 rounded;

}

Now just go back to your index.html and instead of long class you can just write btn and code will look like :

<button class="btn">Click Me</button>

Now recompile the file using terminal with below code :

npx tailwindcss build tailwind.css -o style.css