DEV Community

Cover image for Tailwind CSS
Piyush
Piyush

Posted on

Tailwind CSS

  • 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
display: flex;
flex-direction: column;
justify-content:center;
align-items:center;
Enter fullscreen mode Exit fullscreen mode
  • Tailwind CSS
<div class="flex items-center justify-center flex-cols">
Enter fullscreen mode Exit fullscreen mode

Layout

- container : container
- Height : [min/max]-h-[full/screen]
- Width : [min/max]-w-[full/screen]
Enter fullscreen mode Exit fullscreen mode

Flex

flex
flex-[col/row]
items-[left/center/right]: vertically
justify-[start/center/right]: horizontally
space-y-3
md:flex-row
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode
  • button
p-[1..6]
bg-[color]-[50..900]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Practice

Cheat sheet

Free Components

Top comments (0)