Tailwind CSS
Tags: css, tailwindcss, ui
Published: 2024-03-11 09:07:06


- Tailwind being mobile first framework has a responsive design curve
- It follows atomic styling classes where each CSS property can be defined by using class attributes
- To learn tailwind faster, start exploring its free component availabe in the market
- One great thing about TailwindCss community is they provide really good documentation : https://tailwindcss.com/

__eg : For flex box layout__
- Plain CSS
```css
display: flex;
flex-direction: column;
justify-content:center;
align-items:center;
```
- Tailwind CSS
```html
<div class="flex items-center justify-center flex-cols">
```

## Layout
```
- container : container
- Height : [min/max]-h-[full/screen]
- Width : [min/max]-w-[full/screen]
```

## Flex

```css
flex
flex-[col/row]
items-[left/center/right]: vertically
justify-[start/center/right]: horizontally
space-y-3
md:flex-row
```

## Image

- layout : object-fit rounded-xl h-80 md:h-64
- animate : transform hover:scale-105 hover:rounded-xl duration-200

## Content
Classes for typography 
```
font-serif 
text-[sm/md/lg/xl/2xl..6xl]
font-[light/medium/bold] 
text-[left/center/right] 
text-[color]-[50..900]
md:text-left 
leading-[normal/relax/loose]
```

- button 
```
p-[1..6]
bg-[color]-[50..900]
```

  button
  .group
  span=vector
  Dash under text = .mx-2.mt-2.duration-500.border-b-2.opacity-0.border-black.group-hover:opacity-100
- anchor
```
  Link
  anchor tag
   no-underline font-bold
```

## Input
- outline : `form > grp > input + label`

```
appearance-none : remove default input styling

w-full  :
rounded-lg
border border-gray-300 border-1 focus:border-blue-600 focus:outline-none  : border styling
  bg-transparent

---submit
Click Effect :  bg-blue-600 hover:bg-blue-400
Box effect : shadow-lg
Pointer : Cursor-pointer

```

## Signup Page

Try to breakdown the Page into signle UI Components and then even at micro level css visually (not literally;)

__Concept__

- visualize One Single page
- Layout being grid with 2 col ,
  • 1 with image and
  • 1 with 2 input fields (email & password)

__Steps__
- List Down Components : card, image, input field
- toc : Create a Outling of it
  • html
  • card
    • 1 : image
      • wrapper( image )
    • 1 : form
      • grp( input + label )
      • inp_submit


## Image Gallery

- Global Container (grid)
  - ImgContainer: .relative.group
    - wrapper_image
    - text_over_image :
      - position : .absolute.botttom-0.left-0.right-0
      - animate : .duration-500.opacity-0.group-hover:opacity-100

__Projects__
- [Awesome Tailwind](https://github.com/aniftyco/awesome-tailwindcss)
- [Tailwind Course](https://github.com/bradtraversy/tailwind-course-projects)
- [Component Practice](https://github.com/MbaziiraRonald/Tailwind_Components?tab=readme-ov-file)


__Practice__
- [Frontend Mentor](https://www.frontendmentor.io/challenges)
- [icodethis](https://icodethis.com/app)
- [Frontend Practice](https://www.frontendpractice.com/projects/abstract)

__Cheat sheet__
- https://nerdcave.com/tailwind-cheat-sheet
- https://umeshmk.github.io/Tailwindcss-cheatsheet/

__Free Components__
- https://www.hyperui.dev/
- https://merakiui.com/
- https://componentland.com/
- https://tailwindflex.com/