tailwind/front end/ by Nima Shokouhfar

1. Styles

1.1. bad

1.2. good

1.3. not as good

1.4. not as bad

1.5. important

1.6. warning

2. main

2.1. cheat code

2.1.1. Image

2.1.1.1. object

2.1.1.1.1. object-center

2.1.1.1.2. object-cover

2.1.1.1.3. object-contain

2.1.1.2. SVG

2.1.1.2.1. color

2.1.2. tailwind tyypography

2.1.2.1. typeography

2.1.2.1.1. npm install @tailwindcss/typography

2.1.2.1.2. add the plugin

2.1.2.1.3. prose dark:prose-invert

2.1.3. container

2.1.3.1. The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.

2.1.4. inline

2.1.4.1. block vs inline vs inline-block

2.1.4.1.1. display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

2.1.4.1.2. Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

2.1.4.2. inline-block

2.1.4.2.1. rather than stack

2.1.5. text

2.1.5.1. text-gray-600

2.1.5.2. text-2xl

2.1.5.3. text-right

2.1.5.4. text-center

2.1.5.5. leading-3

2.1.5.5.1. line-height: .75rem; /* 12px */

2.1.5.6. tracking-wider

2.1.5.6.1. Letter Spacing

2.1.5.7. line-through

2.1.5.8. max-w-sm

2.1.5.9. tracking-wider

2.1.5.9.1. text space

2.1.6. font

2.1.6.1. font-bold

2.1.6.2. font-semibold

2.1.6.3. font-light

2.1.6.4. uppercase

2.1.6.5. lowercase

2.1.6.6. font-sans

2.1.7. shadow

2.1.7.1. shadow-lg

2.1.7.2. shadow-inner

2.1.7.3. shadow-blue-500/50

2.1.7.4. shadow-[inset_-2px_-2px_#6E1313]

2.1.7.4.1. example

2.1.7.4.2. explanation

2.1.8. rounded

2.1.8.1. rounded-xl

2.1.8.2. rounded-b-2xl

2.1.8.3. rounded-r-none

2.1.8.3.1. rounded-br-none

2.1.8.4. rounded-t-full

2.1.8.4.1. without it

2.1.8.5. music note rounded

2.1.8.5.1. w-[12px] h-[32px] rounded-[50%]

2.1.8.5.2. note

2.1.9. height

2.1.9.1. h-10

2.1.9.2. h-screan

2.1.9.2.1. full screan

2.1.9.3. min-h-screen & min-h-dvh

2.1.10. width

2.1.10.1. w-6

2.1.10.2. w-1/4

2.1.10.2.1. percentage

2.1.10.3. w-full

2.1.10.4. max-w-sm

2.1.11. padding

2.1.11.1. p-8

2.1.11.2. px-8

2.1.11.3. py-8

2.1.11.4. pr-8

2.1.11.5. pl-8

2.1.11.6. margin is outside padding is inside

2.1.12. margin

2.1.12.1. mt-8

2.1.12.1.1. margin top

2.1.12.2. mb-8

2.1.12.3. m-8

2.1.12.4. mx-auto

2.1.12.4.1. example

2.1.12.4.2. mx-auto is a shorthand class that sets both margin-left and margin-right to auto, effectively horizontally centering an element with a defined width.

2.1.12.5. ml-8

2.1.12.5.1. margin left

2.1.12.6. margin is outside padding is inside

2.1.12.7. use for overlapping

2.1.12.7.1. -ml-6

2.1.12.7.2. negative margin does the magic

2.1.13. border

2.1.13.1. border-width-1

2.1.13.2. border-b

2.1.13.3. border-gray-100

2.1.13.4. border-2

2.1.13.5. ring

2.1.13.5.1. ring-2 ring-purple-300

2.1.14. removing the existing styling for existing libraries

2.1.14.1. all-unset

2.1.14.2. appearance-none

2.1.15. break

2.1.15.1. break points

2.1.15.1.1. options

2.1.15.1.2. example

2.1.15.2. mouse

2.1.15.2.1. hover

2.1.15.2.2. cursor-not-allowed

2.1.15.2.3. cursor-pointer

2.1.15.3. even/odd

2.1.15.3.1. even:

2.1.15.3.2. odd:

2.1.15.4. dark:

2.1.16. visibility

2.1.16.1. hidden

2.1.16.1.1. example

2.1.16.2. block

2.1.16.2.1. I am not sure, though

2.1.17. it puts something on middle of the check box by tailwind

2.1.17.1. checked:after:content-['✓ ']

2.1.18. To override existing css styling

2.1.18.1. !p-0

2.1.18.2. !

2.1.19. put a card on middle of the screen / center of the screen

2.1.19.1. min-h-screen flex items-center justify-center

2.1.19.1.1. use min-h-screen instead of h-screen. If the ui is too long, h-screan will not render it properly

2.1.19.1.2. min-h-screen vs h-screen

2.1.20. *

2.1.20.1. * / asterisk / wildcard

2.1.20.1.1. In Tailwind CSS, the * symbol is often used in combination with modifiers or selectors to apply styles to all elements or in specific contexts.

2.1.20.2. self-start / self-end / self-center

2.1.20.2.1. self-end

2.1.21. equally divided

2.1.21.1. flex-1

2.1.21.1.1. flex-1: This makes both child div elements consume an equal amount of space within the parent flex container.

2.1.22. Backdropblur

2.1.22.1. <div class="backdrop-blur-sm bg-white/30 ...">

2.1.22.2. backdrop-blur bg-white/50

2.1.22.3. inset-0

2.1.22.3.1. absolute inset-0 for backdrop-blur: inset-0 ensures the backdrop-blur element covers the entire parent container (top: 0; right: 0; bottom: 0; left: 0).

2.1.23. flexbox /flex

2.1.23.1. container

2.1.23.1.1. flex

2.1.23.1.2. justify-center

2.1.23.1.3. justify-start

2.1.23.1.4. justify-evenly

2.1.23.2. items

2.1.23.2.1. items-center

2.1.23.2.2. items-end

2.1.23.2.3. items-strech

2.1.23.3. inline-flex

2.1.23.3.1. inline-flex does not make flex items display inline. It makes the flex container display inline.

2.1.23.3.2. It's like make a div inline or block,

2.1.23.3.3. display: inline-flex is equivalent to display: inline flex

2.1.23.4. space-y-8

2.1.23.4.1. Use this to standardize the distance for items

2.1.23.5. examplpe

2.1.23.5.1. flex flex-col space-y-8

2.1.23.6. flex-wrap

2.1.23.6.1. Use flex-wrap to allow flex items to wrap:

2.1.23.6.2. example

2.1.23.7. flex-none

2.1.23.7.1. size does not change

2.1.23.8. flex-auto

2.1.23.8.1. it grows and shrink

2.1.23.9. flex-col-reverse

2.1.23.9.1. the order of image and the title are reversed

2.1.23.10. flex-row

2.1.23.10.1. flex-col

2.1.24. overflow-hidden

2.1.24.1. image goes out of the card

2.1.24.1.1. image is not rounded at the edges

2.1.24.2. it does not work as expected if the parent component has a flex

2.1.24.3. Does not work with absolutewithout a relative

2.1.24.3.1. good example

2.1.24.3.2. The issue with your overflow-hidden not working lies in the way you're using absolute positioning with margins (ml and mt). The overflow-hidden works on the parent, but because you're positioning the child elements using absolute and margins, they can still appear outside of the parent due to their fixed positioning relative to the closest positioned ancestor (which could be relative or another parent).

2.1.24.3.3. Solution:

2.1.25. layout

2.1.25.1. absolute/relative

2.1.25.1.1. div relative

2.1.26. everytime changing tailwind.config.js you need to rebuild the css

2.1.27. interactivity

2.1.27.1. group-hover:

2.1.27.1.1. element inside another element

2.1.27.2. transition

2.1.27.2.1. ease-out

2.1.27.2.2. duration-500

2.1.27.2.3. types

2.1.27.3. transform

2.1.27.3.1. hover:scale-125

2.1.27.3.2. hover:bg-opacity-50

2.1.27.3.3. focus:

2.1.27.3.4. active:

2.1.27.3.5. rotate-12

2.1.27.3.6. rotate

2.1.27.3.7. translate

2.1.27.3.8. you can not manipulate the order of operation in tailwinds. for doing rotation then translation you should use css instead

2.1.27.4. animation

2.1.27.4.1. animate-bounce

2.1.27.4.2. animate-spin-slow

2.1.27.5. group-hover:animate-ping

2.1.28. z-index

2.1.28.1. example

2.1.28.1.1. <div class="bg-[#38BDF8] h-screen px-[32px] "> <div class="px-[21px] pt-[29px] flex *:w-[80px] z-10 *:h-[36px]"> <div class="bg-[#BAE6FD] rounded-xl border-2 border-[#7DD3FC]"></div> <div class="bg-[#BAE6FD] ] rounded-xl border-2 border-[#7DD3FC] ml-[-7px]"></div> <div class="bg-[#BAE6FD] rounded-xl border-2 border-[#7DD3FC] ml-[-7px]"></div> <div class="bg-white rounded-xl border-2 border-[#7DD3FC] ml-[-7px]"></div> </div> <div class="bg-white h-full rounded-lg mt-[-10px] z-20 relative"></div> </div>

2.1.28.1.2. z-20 relative

2.1.28.2. groups issue

2.1.28.2.1. fix

2.1.29. clip

2.1.29.1. style="clip-path: polygon(x1 y1, x2 y2,...,xn yn );"

2.1.29.1.1. <div class="w-32 h-32 bg-blue-500" style="clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 25%, 75% 0%);"></div>

2.1.30. z index

2.1.30.1. 1

2.1.30.1.1. 2

2.1.31. color

2.1.31.1. text-slate-200

2.1.31.2. bg-slate-200

2.1.31.3. text-black

2.1.31.4. underline decoration-yellow-500

2.1.31.5. border border-orange-400

2.1.31.6. divide-y divide-blue-300

2.1.31.7. outline outline-blue-200

2.1.31.7.1. outline outline-[80px]

2.1.31.8. shadow shadow-cyan-500

2.1.31.8.1. shadow shadow-purple-500/60

2.1.31.9. custom

2.1.32. background

2.1.32.1. bg-cover

2.1.32.2. bg-no-repeat

2.1.32.3. bg-center

2.1.32.4. bg-gradient

2.1.32.4.1. from-cyan-500

2.1.32.4.2. to-cyan-600

2.1.33. gradient

2.1.33.1. <div class="bg-black h-screen flex justify-center items-center"> <div class="bg-[#3B82F6] h-[95px] w-[200px] rounded-full flex items-center p-2 "> <div class=" bg-gradient-to-t from-[#3B82F6] to-red-500 rounded-full w-[80px] h-[80px]"></div> <div class=" bg-gradient-to-t from-[#3B82F6] to-red-500 -ml-6 rounded-full w-[80px] h-[80px]"></div> <div class=" bg-gradient-to-t from-[#3B82F6] to-red-500 -ml-6 rounded-full w-[80px] h-[80px]"></div> </div> </div>

2.1.34. tricks

2.1.34.1. 1

2.1.34.1.1. <div class="w-[104px] bg-slate-500 h-screen"> <div class="relative left-[12px] top-[32px] flex h-[66px] w-[64px] items-center justify-center"> <div class="absolute h-[64px] w-[24px] rounded bg-[#F8FAFC]"></div> <div class="absolute h-[64px] w-[24px] rotate-90 rounded bg-[#F8FAFC]"></div> <div class="absolute h-[60px] w-[20px] rounded bg-[#020617]"></div> <div class="absolute h-[60px] w-[20px] rotate-90 rounded bg-[#020617]"></div> </div> </div>

2.1.34.1.2. 2times drawing two perpendicular rectangles. The first time, we draw their borders. The second time we draw the background.

2.1.34.2. only use two borders and rotate to create chevron

2.1.34.2.1. <div class="border-[#4D5B6E] border-[3px] border-b-0 border-l-0 bor w-2 h-2 rotate-45 "></div>

2.1.35. scroll

2.1.35.1. scroll

2.1.35.1.1. to make nav menu a little higher than the scroll location

2.1.35.2. scroll-smooth

2.1.36. bg

2.1.36.1. bg-muted

2.1.36.2. bg-background

2.1.37. input

2.1.37.1. placeholder

2.1.37.1.1. placeholder:text-center

2.1.37.1.2. placeholder:text-center

2.1.37.1.3. placeholder:text-xs

2.1.37.1.4. focus:outline-none

2.1.38. grid

2.1.38.1. grid

2.1.38.1.1. grid

2.1.38.1.2. col-span-2

2.1.38.1.3. place-items-center

2.1.39. CSS

2.1.39.1. base layer

2.1.39.2. @apply

2.1.40. sr-only

2.1.40.1. Use sr-only to hide an element visually without hiding it from screen readers:

2.2. tut

2.2.1. grid

2.3. courses

2.3.1. compelete

2.3.1.1. 1

2.3.2. official course

2.3.3. alfanso

2.4. tailwind battle solutions

2.4.1. git repo

2.5. footer end of the page

2.6. tailwind 4

2.6.1. in tailwind 4 tailwind.config.js is missing

2.6.1.1. the reason this is happening is this

2.6.1.2. https://www.reddit.com/r/nextjs/comments/1j5oiwg/tailwindconfig_file_not_getting_installed_in/