- 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;
- Tailwind CSS
<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
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
Practice
Cheat sheet
Free Components
Top comments (0)