Скачать или смотреть Replacing TailwindCSS

From the live stream: Replacing TailwindCSS with SCSS for my Website Template

I'll be continuing my removal of TailwindCSS from my NextJS project and work through the remaining sections to include my own SCSS instead of TailwindCSS.

There's a place for Tailwind, but my project doesn't seem to be that place.

I'll be tackling a variety of web development challenges using NextJS, PayloadCMS, and SCSS! This video mostly covers fine-tuning responsive styles.

I kick things off by launching a NextJS service using pnpm and quickly dive into customizing PayloadCMS, removing unnecessary fields, and removing SVG usage in favor of image icons. Debugging is a key part of the journey, so you'll see practical, real-time troubleshooting for TypeScript errors, misaligned elements, and unexpected behaviors in responsive designs.

The video also explores powerful CSS features like modules, responsive stylings, and advanced layout techniques using flexbox and CSS grid. I discuss flex-grow, flex-basis, and other properties (as best I can), showing how to create dynamic, precise designs.

You'll learn to style global CSS elements, replace TailwindCSS for SCSS, and adjust typography, line-heights, and button styles for polished results. Finishing touches include fixing navigation issues, refining client logos, and (as a fun aside) leveraging mix-blend-mode for unique image effects.

Stay tuned to the end for final adjustments and tips to ensure your project is both functional and visually appealing. If you're passionate about clean, responsive, and modern web design, this video is a must-watch!

Notes:
– flex-basis takes the gap amount into account when setting an item's width. So, your flex-basis may never be exactly 50% for two items, for example.
– There was supposed to be music behind this stream, but it didn't get captured for some reason :)
– TailwindCSS's base styles are stored in a file called Preflight, which you can find online to initialize your stylesheet.

0:00 - Introduction
0:29 - start the Next service with pnpm
3:20 - removing a relationship field in PayloadCMS
4:53 - replace SVG code with image icons
6:44 - troubleshooting TypeScript issue (incorrect property in type declaration)
9:33 - import classes from SCSS module
9:53 - styling an image icon
12:03 - using flex to setup the image icon layout
15:04 - exploring flex-grow, flex-shrink, and flex-basis
17:10 - align items to the top of the container
20:15 - removing flex-grow and flex-shrink to prevent an item from taking the full width of a div
23:01 - flex-basis takes the gap amount into account when setting width
25:11 - style a summary block
25:31 - review global CSS
26:08 - explanation of clamp() in CSS
28:43 - center the last item of a flex-box
30:28 - setting the width of a box
31:39 - using a grid to set up the style of the summary box
34:08 - adjusting font sizes for the summary header and summary text
36:08 - using * in SCSS
38:38 - replacing TailwindCSS with SCSS on a table of contents
51:27 - conditionally render between an ordered and unordered list
53:58 - removing inset border from iframe
54:18 - adjusting line-height and distance between paragraph tags
56:14 - troubleshooting image sizing issues (responsive stylings unset)
56:40 - applying responsive stylings to img elements
58:43 - removing text decoration from a elements
1:00:00 - removing default button styles
1:02:33 - troubleshoot misaligned text in nav
1:03:37 - troubleshoot nav height changing on view height changing (50vh was set)
1:05:48 - finalize nav styles
1:10:48 - fix rich text default colors and check responsiveness
1:13:15 - troubleshoot FAQ section dynamic, animated height issues
1:15:39 - restyle client logos using flex-box
1:29:47 - using "mix-blend-mode: multiply" to remove white from images
1:32:30 - outro

#coding #webdevelopment #frontenddevelopment #nextjs #livecoding #css #javascript #webdesign #responsivedesign