tailwind/front end/ by Nima Shokouhfar

1. Nima Shokouhfar

1.1. Linkedin

1.1.1. Follow me on LinkedIn to stay updated on my latest professional insights and tech projects!

1.1.1.1. www.linkedin.com/in/nima-shokouhfar

1.2. Youtube

1.2.1. code with nima

1.2.1.1. 📺 Subscribe to Code with Nima on YouTube for coding tutorials, tips, and tricks to improve your development skills!

1.2.1.1.1. https://www.youtube.com/@codewithnima

1.2.2. ideariver

1.2.2.1. 💡 Subscribe to Ideariver on YouTube to explore innovative ideas and projects that push the boundaries of creativity!

1.2.2.1.1. https://www.youtube.com/@Ideariver

1.3. Medium

1.3.1. ✍️ Follow me on Medium to read my latest articles on tech, coding, and innovation!

1.3.1.1. https://medium.com/@nima.shokofar

1.4. Github

1.4.1. ⭐️ Give my projects a star on GitHub and explore my repositories to discover new tools and innovations!

1.4.1.1. https://github.com/nima70

1.4.2. 💖 Sponsor me on GitHub to support my open-source contributions and help me create even more useful projects!

1.4.2.1. https://github.com/sponsors/nima70

1.5. upwork

1.5.1. 💼 Hire me on Upwork for freelance projects. Let’s work together to bring your tech ideas to life!

1.5.1.1. https://www.upwork.com/freelancers/nimas12

1.6. Patreon

1.6.1. https://www.patreon.com/c/CodewithNima

1.7. main website: ideariver.ca

1.7.1. 🚀 Visit IdeaRiver.ca for all my latest projects, blogs, and ways to connect!

1.7.1.1. https://ideariver.ca/

1.8. mindmeister

1.8.1. https://www.mindmeister.com/users/channel/12952106

1.9. Udemy

1.9.1. https://www.udemy.com/user/nima-shokouhfar/?srsltid=AfmBOopfkLQBVtdYIA44yOk8xw9jscZUmQL44HLmtCDD_2ZWGxAMQ4wL

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/