标签：#css

Picking colors is the fun part. Wiring them into a codebase that stays maintainable is where most palettes fall apart. Here's the approach I use. 1. Name colors by role, not value Don't scatter hex codes everywhere: css .button { background: #6366f1; } .link { color: #6366f1; } Define them once as custom properties, referenced by role: :root { --color-bg: #f7f7f8; --color-surface: #ffffff; --color-text: #1f2937; --color-muted: #9ca3af; --color-accent: #6366f1; } .button { background: var(--color-accent); } .link { color: var(--color-accent); } Now re-theming the whole app is a few edits in one place. 2. Skip pure black and pure white #000 on #fff feels harsh on screens. Pull both back: --color-text: #1f2937; /* near-black */ --color-bg: #f7f7f8; /* off-white */ Most layouts instantly look more intentional. 3. Dark mode is almost free Because the colors are role-based variables, you just override the values: @media (prefers-color-scheme: dark) { :root { --color-bg: #0f1115; --color-surface: #1a1d24; --color-text: #e5e7eb; } } Every component using var(--color-bg) adapts automatically. A shortcut I got tired of hand-converting palettes into this, so I built a free tool, PaletteCSS, that copies any palette straight out as CSS variables, Tailwind or SCSS — and has a color palette generator if you need a starting point. But honestly, the three rules above matter more than any tool. What conventions do you use to keep a color system maintainable? PaletteCSS — a free tool to discover, create and share color palettes and CSS gradients. Copy any palette as hex, CSS variables, Tailwind or SCSS. No signup. https://palettecss.com**

Note : This article is one of a series demonstrating building a React navigational component from scratch while considering accessibility through the process. The articles are accompanied by a GitHub repository with releases tied to one or more articles; each builds on the previous one until a fully implemented navigation component is complete. Each release and its associated tag contain fully runnable code for the article. The code discussed in this article is available in the release. and may be downloaded at release 0.9.0 . A page showcasing these base components may be run locally through this release. While code examples are written in JavaScript for brevity, all actual code is written in Typescript and targets React 19.x, all while using vanilla CSS. Examples use Next.js v16.x, which is not required to run the navigation component.] The design requirements for this release are available . -— Content Links Introduction Layout Appearance <nav / > Generic Styling Reimagining Focus and Hover Achieving Parity aria-current Refinements Summary Introduction With only one more release coming up and the horizontal layout styling complete, now is the time to focus on completing vertical layout styling. Most of the layout itself was completed in an earlier release and described in the article Laying it all out on the vertical . When styling a component, care must be taken to ensure parity with the information provided by screen readers through some aria attributes. For instance, a navigation component must set the aria-current="page" attribute on a link whose href points to the current page. In the example being shown, the link in question is the "by Era" link, under Find Your Next Story and Tales. ) While screen reader users hear which button or link is the item currently capturing focus, styling is needed to achieve the same for screen users. Visual styling is necessary to guarantee that visual and auditory/tactile users have the same information. Layout @layer system-c

As a systems engineering student and frontend dev, I wanted a portfolio that looked professional without spending days fighting with design. So I built one — and ended up turning it into a reusable template. Here's what I focused on while building it: 1. Customization from a single file The biggest pain with most templates is digging through components to change your info. I put everything — name, bio, projects, skills, social links — into ONE config file. Edit that, and the whole site updates. 2. Light & dark mode Developers love dark mode, so I made it the default, with a smooth toggle for light mode. Both are fully themed. 3. Mobile-first & responsive Most people will view a portfolio on their phone, so I built it mobile-first and tested it down to small screens. 4. Easy deployment It works out of the box with Vercel or any static host, with a beginner-friendly setup guide in the README. The stack React + Vite Tailwind CSS Formspree-ready contact form You can see the live demo here: devfolio-template-vercel-app.vercel.app I also made it available as a template if it's useful to anyone: https://payhip.com/b/t1VUk Would love to hear your feedback — what do you look for in a developer portfolio? react #webdev #tailwindcss #showdev

The Tailwind CSS4 debate is everywhere right now. And honestly? Most people are arguing about the wrong thing. The real question isn't "inline styles vs. utility classes" — it's about where your styling decisions live and who pays the cognitive cost. Let me break down what's actually happening, with real code, real trade-offs, and a clear take at the end. What Changed in Tailwind CSS v4 Tailwind CSS v4 introduced a major shift: CSS-first configuration. Instead of a tailwind.config.js , you define everything in your CSS file using @theme : /* Before (v3) - tailwind.config.js */ module .exports = { theme : { extend : { colors : { brand : '#6366f1' , } , spacing : { 18: '4.5rem', } } } } /* After (v4) - main.css */ @import "tailwindcss" ; @theme { --color-brand : #6366f1 ; --spacing-18 : 4.5rem ; } This is cleaner for many workflows. But it's not what's causing the drama. The Real Flashpoint: Utility Density in JSX What's actually triggering the discourse is how v4 accelerates a pattern that was already polarizing — components that look like this: // The "inline styles but make it Tailwind" pattern function AlertBanner ({ type , message }) { return ( < div className = { ` flex items-center gap-3 px-4 py-3 rounded-lg border ${ type === ' error ' ? ' bg-red-50 border-red-200 text-red-800 ' : ' bg-blue-50 border-blue-200 text-blue-800 ' } ` } > < span className = "text-sm font-medium" > { message } </ span > </ div > ); } vs. the @apply approach many teams prefer: /* alert.css */ .alert { @apply flex items-center gap-3 px-4 py-3 rounded-lg border; } .alert--error { @apply bg-red-50 border-red-200 text-red-800; } .alert--info { @apply bg-blue-50 border-blue-200 text-blue-800; } // Cleaner component function AlertBanner ({ type , message }) { return ( < div className = { `alert alert-- ${ type } ` } > < span className = "text-sm font-medium" > { message } </ span > </ div > ); } Both work. Neither is objectively wrong. But they encode very different philosophies. The Philos

\shadcn/ui and Material UI optimise for opposite priorities. Choose shadcn/ui to own your component code, ship a near-zero runtime, and control every pixel; choose Material UI (MUI) for breadth — 90+ components and a paid data grid — behind Google's Material Design. shadcn/ui has ~116,000 GitHub stars and ships copy-paste components; MUI has ~98,000 stars and ~7.3M weekly npm downloads. Both are MIT-licensed and free for commercial use. This guide covers the parts you only learn by shipping both: how each behaves in the Next.js App Router, the runtime cost, real theming and dark-mode code, forms, data tables, and migration mechanics. What's the real difference between shadcn/ui and Material UI? The difference is ownership, and it decides everything downstream. MUI is an npm dependency ( @mui/material ) you install and import from node_modules — you never touch the source. shadcn/ui is a copy-paste registry: you run a CLI, the component lands in your repo, and it is now your code. shadcn/ui is unstyled, built on Radix UI primitives and Tailwind CSS. MUI ships Material Design and an Emotion (CSS-in-JS) runtime. With MUI you install and import: bash npm install @mui/material @emotion/react @emotion/styled cta.tsx import Button from " @mui/material/Button " ; export function Cta () { return < Button variant = "contained" > Get started </ Button >; } With shadcn/ui the CLI copies the source into your project and you import from your own path — there is no library to upgrade or override: bash npx shadcn@latest add button cta.tsx import { Button } from " @/components/ui/button " ; export function Cta () { return < Button > Get started </ Button >; } That ownership changes how you customise. shadcn's button.tsx lives in your repo and uses class-variance-authority (cva) for variants — you add one directly: components/ui/button.tsx // components/ui/button.tsx — this file is yours const buttonVariants = cva ( " inline-flex items-center justify-center rounded-md ... " , { varia

The main idea of a Carousel isn't just about moving a bunch of elements from left to right because there must be a smoothly infinite movement, this can be done by duplicating the element, but wouldn't it be a waste of time and resources to do so. So the best solution would be rather than moving the whole element, we just move each element on a time based manner, all elements will have the animation but each element will have a unique (incremented) index, by which we will delay its start, and if we made this delay negative, we will have a smooth movement without any lagging adding a will-change will make a separate compositing layer to make the animation run on gpu rather than cpu below is a demo by which, you can understand the effect You can reach me (if you had any problems with the effect): X / twitter "where I post a lot!" LinkedIn

Hello Dev Community! 👋 It is officially Day 45 of my non-stop run toward full-stack engineering! Yesterday, I learned how to serve static HTML pages using Express routing. Today, I took a major step toward building premium, clean, and minimalist UI/UX styles by installing and mastering Tailwind CSS via the Tailwind CLI ! Instead of writing massive, chaotic external CSS stylesheet files, today I shifted to the industry-standard utility-first workflow to speed up my design iterations. 🧠 Key Learnings From Day 45 (Tailwind CSS Architecture) Tailwind doesn't give you pre-built components; it gives you atomic utility classes that let you build completely custom, high-end layouts directly inside your HTML structure. Here is the engineering breakdown: 1. Tailwind CLI Installation & Initialization I learned how to integrate Tailwind from scratch using npm packages instead of lazy CDN links. Installed the tailwindcss compiler core ( npm install -D tailwindcss ). Initialized the configuration hub using npx tailwindcss init . 2. Crafting the Content Map inside tailwind.config.js Understood how Tailwind optimizes final file weights using tree-shaking. I configured the structural template paths so the compiler knows exactly which files to scan for dynamic styling classes: javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./public/**/*.{html,js}"], // Scanning static folders cleanly theme: { extend: {}, }, plugins: [], }

Hello Dev Community! 👋 It is Day 32 of my continuous web development run, and today I jumped into a project that pushed my array manipulation and conditional logic to a whole new level: A complete Snake and Ladder Board Game using HTML5, CSS3, and Vanilla JavaScript! After building Rock Paper Scissors yesterday, I wanted to tackle a game that requires tracking persistent coordinate states across a 100-cell mathematical grid. 🛠️ The Game Architecture & Logic Breakdown Building this wasn't just about random numbers; it was about managing spatial transitions on a dynamic interface. Here is how I structured the core backend mechanics: 1. The 100-Cell Grid Layout Instead of manually hardcoding 100 divs inside my index file, I engineered the grid programmatically. I mapped out a loop running from 100 down to 1, building individual cell elements and using CSS Grid properties to wrap them perfectly into a standard 10x10 layout matrix. 2. Mapping Snakes & Ladders (The Jump Engine) To build the shortcuts and traps, I didn't write massive, messy if-else trees. Instead, I utilized a clean JavaScript Object Map tracking key-value pairs where the key is the trigger tile and the value is the destination tile: javascript const gameModifications = { // Ladders (Climbing up) 4: 14, 9: 31, 21: 42, 28: 84, 51: 67, 72: 91, 80: 99, // Snakes (Sliding down) 17: 7, 54: 34, 62: 19, 64: 60, 87: 36, 93: 73, 95: 75, 98: 79 };

So you have heard about the Tailwind CSS and want to incorporate into your new project. But those...

UI IP Toolkit - A standalone static visual catalog for CSS/JS components I built UI IP Toolkit to solve my own workflow problem: I kept losing useful UI snippets (buttons, loaders, CTA blocks, glassmorphic cards, layout grids) across old projects and directories. Live site: https://ui-ip-toolkit.vercel.app/ GitHub Repository: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0 Design Philosophy Zero dependencies: Raw HTML, CSS, and vanilla JS. No NPM packages, framework configurations, or build steps required. Copy-paste ready: Visual preview cards with one-click copy buttons for immediate use in any stack. Light/Dark mode: Clean design system focusing on micro-interactions, sleek gradients, and responsive layouts. Visual catalog: Catalog of gradients, buttons, fonts, loading states, hover treatments, glass surfaces, layout fragments, and UI patterns. How do you manage your personal code/CSS snippet collections? Hope this is useful to others!

Eight years ago (a geological epoch or two ago in Internet terms) Nicholas Jitkoff released itty.bitty.site - a website which could render whole websites just based on what was in the link, something like: itty.bitty.site?SOMEBASE64ENCODEDVALUE== et voilà! Free web-hosting if you could make it fit ;) At the time, I was rather obsessed with qr-codes thanks to developing QRGoPass and was working with aster plots a lot, so I developed an app that could fit into a qr-code! Today itty.bitty.site no longer exists so I can't do that any more... But I did make it 80% smaller without "cheating" and using modern CSS instead of d3.js ;)

In times when people believe that "AI can code a website in 2 days" (see: how to leverage AI as a...

A press effect, shadow on rest, lifted on hover, depressed on active, is not central to buttons. It can be used on cards, image gallery photos, and other elements. The same goes for animations and other behaviors. This leaves me to question "why aren't they decoupled from the component? In my own code I create with a dedicated behaviors layer. Each interaction pattern is its own class, independent of any component. You can even stack multiple behaviors together. Let's create a simple one that adds more click affordance. Press Example Adding b-press gives any flat element a physical depth through shadow states. It lifts on hover and depresses on active, giving users a clear sense that something is clickable. Disabled elements will lose the shadow entirely so the affordance disappears with the interaction. CSS @layer behaviors { .b-press { box-shadow: var(--wisp-shadow, 0 1px 2px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06) ); cursor: pointer; } .b-press:hover { box-shadow: var(--wisp-shadow-hover, 0 4px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.10) ); } .b-press:active { box-shadow: var(--wisp-shadow-active, 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.12) ); transform: translateY(1px); } .b-press:disabled, .b-press[aria-disabled="true"] { box-shadow: 0 0 0 rgba(0, 0, 0, 0); cursor: not-allowed; } } HTML <div class="o-card b-press"> ... </div> Finally When we think of OOCSS we think of visual repeating patterns, but behaviors are patterns too and deserve the same love that objects and components get. You can find the decoupled behaviors in my framework source here: https://github.com/wispcode/wisp-css/tree/main/src/behaviors

Originally published on danholloran.me There's a moment every CSS developer knows: you want to tweak a single property based on some condition — a viewport width, a user preference, a custom property — and instead of a clean one-liner you end up with a whole new @media block, duplicated selectors, and maybe a dash of JavaScript to handle the edge cases. It works, but it never feels right. The CSS if() function changes that. Shipping in Chrome 137, it brings inline conditional logic directly into your property declarations, letting you express branching style logic without leaving the property itself. How if() Works The syntax is a sequence of condition-value pairs, evaluated top to bottom until one matches: property : if ( condition : value ; else : fallback ); The function supports three types of conditions: style() — queries computed CSS custom property values media() — runs an inline media query supports() — feature-detects a CSS property or syntax You can chain them with else : button { padding : if ( media ( width >= 1024px ): 0.5rem 1.5rem ; else : 0.75rem 1.25rem ); } That's a responsive padding rule with zero extra @media blocks. Three Practical Uses 1. Touch-Friendly Targets with media() The pointer media feature lets you distinguish mouse users from touchscreen users. The accessible minimum tap target is 44px; mouse users can get away with smaller: .icon-button { width : if ( media ( any-pointer : fine ): 32px ; else : 44px ); height : if ( media ( any-pointer : fine ): 32px ; else : 44px ); } Previously this needed a full @media (any-pointer: coarse) block. Now it reads like what it is — a single property with two states. 2. Theme Switching with style() Custom properties are often used to carry design tokens — theme flags, component variants, status values. The style() query lets you branch on them inline: .status-badge { --status : pending ; background : if ( style ( --status : complete ): #22c55e ; style( --status : error ): #ef4444 ; else : #f59e0b );

A step-by-step, beginner-friendly guide to stripping out Bootstrap and setting up the blazing-fast Tailwind CSS v4 compiler in your .NET Blazor Hybrid or Web app. Tailwind CSS v4 is officially here, and it is a complete game-changer! It scraps the old, bulky JavaScript configuration files ( tailwind.config.js ) and moves your theme settings directly into standard CSS. Plus, its new native compiler is faster than ever. If you are building a .NET Blazor app (whether it's Blazor WebAssembly, Server, or a MAUI Blazor Hybrid app) and want to swap out the default Bootstrap styles for utility-first Tailwind bliss, you can do it all without ever leaving your IDE. Let's get this configured step-by-step using Visual Studio 2022 ! Prerequisites Before we start, make sure you have: Node.js installed on your development machine. A Blazor project opened in Visual Studio 2022 . Step 1: Say Goodbye to Bootstrap in Solution Explorer Blazor templates ship with Bootstrap by default. Let's use Visual Studio's Solution Explorer to clean that out so our styles don't conflict. In the Solution Explorer window, expand your wwwroot folder. Expand the css subfolder. Right-click the bootstrap folder and select Delete . Now, open your main HTML entry file inside wwwroot (this will be index.html for Blazor Hybrid/WASM or App.razor inside the Components folder for Blazor Web). Locate the <head> section and delete the line linking the Bootstrap stylesheet: <link rel= "stylesheet" href= "css/bootstrap/bootstrap.min.css" /> powershell Step 2: Open the Developer PowerShell & Install Tailwind v4 Tailwind v4 splits the design library from the command-line build tool, so we need to install both. We can use Visual Studio's built-in terminal for this. In the top menu of Visual Studio 2022, go to Tools > Command Line > Developer PowerShell . A terminal window will open at the bottom of your IDE, already navigated to your project folder. Paste and run the following commands: i. Initialize a package.json fil

A step-by-step, beginner-friendly guide to stripping out Bootstrap and setting up the blazing-fast Tailwind CSS v4 compiler in your .NET Blazor Hybrid or Web app. Tailwind CSS v4 is officially here, and it is a complete game-changer! It scraps the old, bulky JavaScript configuration files ( tailwind.config.js ) and moves your theme settings directly into standard CSS. Plus, its new native compiler is faster than ever. If you are building a .NET Blazor app (whether it's Blazor WebAssembly, Server, or a MAUI Blazor Hybrid app) and want to swap out the default Bootstrap styles for utility-first Tailwind bliss, you can do it all without ever leaving your IDE. Let's get this configured step-by-step using Visual Studio 2022 ! Prerequisites Before we start, make sure you have: Node.js installed on your development machine. A Blazor project opened in Visual Studio 2022 . Step 1: Say Goodbye to Bootstrap in Solution Explorer Blazor templates ship with Bootstrap by default. Let's use Visual Studio's Solution Explorer to clean that out so our styles don't conflict. In the Solution Explorer window, expand your wwwroot folder. Expand the css subfolder. Right-click the bootstrap folder and select Delete . Now, open your main HTML entry file inside wwwroot (this will be index.html for Blazor Hybrid/WASM or App.razor inside the Components folder for Blazor Web). Locate the <head> section and delete the line linking the Bootstrap stylesheet: <link rel= "stylesheet" href= "css/bootstrap/bootstrap.min.css" /> powershell Step 2: Open the Developer PowerShell & Install Tailwind v4 Tailwind v4 splits the design library from the command-line build tool, so we need to install both. We can use Visual Studio's built-in terminal for this. In the top menu of Visual Studio 2022, go to Tools > Command Line > Developer PowerShell . A terminal window will open at the bottom of your IDE, already navigated to your project folder. Paste and run the following commands: i. Initialize a package.json fil

Most developers learn CSS specificity once. They remember: #id > .class > div Then move on. Until one day… Everything looks correct. The CSS is present. The selector is correct. The z-index looks higher. And yet the UI is broken. That’s when CSS specificity stops being a beginner topic and becomes a production debugging problem. The Production Incident That Started This Recently, I was working on a microfrontend application. Everything worked fine initially. I opened a page, launched a modal and the UI looked correct. Then I navigated to another microfrontend. Its CSS got loaded. After returning to the original microfrontend, suddenly: ❌ Modal appeared behind page content ❌ Overlay behaved incorrectly ❌ z-index looked correct but wasn't working DevTools showed my CSS rule still existed. Yet another CSS rule was winning. The culprit? CSS Specificity. 🧠 What is CSS Specificity? CSS specificity is the algorithm browsers use to decide: Which CSS rule wins when multiple rules target the same element. Browsers don't simply apply: "The last CSS rule." That's one of the biggest misconceptions. Specificity is calculated first. Only when specificity is equal does source order become important. ⚔️ Example .modal { z-index : 9999 ; } .some-library .modal { z-index : 100 ; } HTML: <div class= "some-library" > <div class= "modal" ></div> </div> Many developers expect: .modal to win because the value is larger. But CSS doesn't compare values first. It compares selectors. 🧮 How Specificity Works Specificity is usually represented as: ID - CLASS - TYPE Specificity Table Selector Specificity * 0-0-0 div 0-0-1 .modal 0-1-0 [type="text"] 0-1-0 :hover 0-1-0 #dialog 1-0-0 Inline Style Highest MDN defines specificity as the weight browsers calculate to determine which declaration gets applied when multiple selectors match the same element. Example Calculation Selector: button .primary Contains: button → 0 -0-1 .primary → 0 -1-0 Total: 0-1-1 Another selector: #header button .primary Contai

There's a specific kind of bad animation I notice immediately: the count-up stat that stutters as it ticks, the progress bar that lags a frame behind your scroll, the "active" tab underline that snaps instead of glides. None of it is broken, exactly. It just feels cheap. And nine times out of ten, the cause is the same — the animation is being driven through React state, so every frame triggers a re-render, and the main thread can't keep up. I build motion-heavy interfaces for a living, mostly in Next.js 16 and React 19, and I've landed on a small set of patterns that stay smooth because they bypass React's render loop entirely . They lean on Motion — the library formerly known as Framer Motion. It went independent and got renamed in 2025, so the package is now motion and the import you want is motion/react , not framer-motion ( the APIs are identical, only the import path changed ). Here are three I reach for constantly, plus the reduced-motion discipline that should wrap all of them. The mental model: MotionValues over state The single idea that fixes most jank: a MotionValue is a value Motion tracks outside of React. When it changes, Motion updates the DOM directly via transform or opacity — it does not call setState , so your component doesn't re-render. That's the whole trick. A number ticking from 0 to 4,200 should touch the DOM ~60 times a second and re-render React zero times. If a value changes every frame, it should live in a MotionValue, not in useState . State is for things that change when a user does something; MotionValues are for things that change continuously. Keep that line in your head and the rest of this falls out naturally. 1. A reading-progress bar with useScroll + useSpring The bar at the top of an article that fills as you read. The naive version listens to scroll events and sets state — which is exactly the re-render trap. Motion's useScroll hands you scroll position as a MotionValue already, so there's nothing to re-render. useScroll retu

What are HTML Tags? HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building blocks that define the structure and content of a webpage. HTML tags are composed of an opening tag, content, and a closing tag. The opening tag marks the beginning of an element, and the closing tag marks the end. The content is the information or structure that falls between the opening and closing tags. For Example: <h1>Hello</h1> HTML Elements HTML elements are the essential components of a webpage and provide structure, organization, and meaning to content. Elements are defined by HTML tags which define how different types of content will appear in a browser window. For Example: <p> This is an element. </p> Block-Level Elements A page’s entire width is occupied by a block-level element. The document always begins with a new line. An HTML page generally has three tags i.e., <html> , <head> , and <body> tag. Example: The following is an unordered list, an example of block-level elements. List item 1 List item 2 Inline Elements A block-level element’s inner content can be formatted with an inline element by adding links and stressed strings. These elements help you to format text without disrupting the content’s flow. Example: The following code creates a hyperlink to a URL. It is an inline element because it is used within paragraphs, headings, or other text content to create hyperlinks. It does not disrupt the flow of the document by forcing new lines before or after its content. <a href="https://www.example.com"> Visit Example </a> CSS Properties CSS properties are used to decorate your web page and assign a unique behavior to your HTML element. CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage. Used to control layout, colors, fonts, spacing, and animations on web pages. It is essential for making web pa

The CSS @custom-media at-rule allows creating aliases for media queries. @custom-media originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.