How to dynamically build tailwind class names

Issue #950 Inspired by shadcn Combine tailwind-merge: Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts. clsx: constructing className strings conditionally. import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }

November 4, 2023 路 1 min 路 Khoa Pham

How to add under highlight to text in css

Issue #701 Use mark. This does not work for multiline <p> <mark css={css` display: inline-block; line-height: 0em; padding-bottom: 0.5em; `}>{feature.title} </mark> </p> Another way is to use background .highlight { background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%); } Read more https://beatrizcaraballo.com/blog/low-highlight-heading-links-squarespace https://stackoverflow.com/questions/43683187/how-can-i-create-custom-underline-or-highlight-for-text-in-html-or-css https://medium.com/@codingdudecom/highlight-text-css-97331a5b71b5 Updated at 2020-11-20 05:23:59

November 20, 2020 路 1 min 路 Khoa Pham

How to conditionally apply css in emotion js

Issue #649 Check flag then define css const Picture = (feature) => { const shadowCss = feature.shadow ? css` border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); ` : css`` return ( <div css={css` width: 40vw; @media (max-width: 420px) { width: 98vw; } `}> <div css={shadowCss}> <img css={css` max-width: 100%; height: auto; `} src={require(`../apps/${feature.image}`)} /> </div> </div> ) }

May 6, 2020 路 1 min 路 Khoa Pham

How to make simple filter menu in css

Issue #643 Use material icons <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> div#filter-container { display: flex; align-items: center; justify-content: center; margin-top: 10%; height: 60px; } div#filter-items { display: inline-flex; background-color: #fff; box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1); border-radius: 12px; overflow: hidden; padding: 10px; } a.filter-item { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; text-decoration: none; padding: 10px; } a.filter-item:hover { background-color: rgb(239, 240, 241); border-radius: 10px; } a....

April 27, 2020 路 1 min 路 Khoa Pham

How to make simple grid gallery in css

Issue #642 Specify container with flex-wrap and justify-content, and item with float: left div.cards { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; margin-top: 10%; } div.card { overflow: hidden; float: left; width: 220px; color: #232330; text-align: center; border-radius: 10px; border-color: silver; box-shadow: 1px 8px 8px rgba(10, 10, 10, 0.2); font-family: 'Open Sans', sans-serif; margin: 16px; transition: all .2s ease-in-out; } div.card:hover { transform: scale(1.2); }

April 26, 2020 路 1 min 路 Khoa Pham

How to edit hexo theme hiero

Issue #494 Code https://github.com/iTimeTraveler/hexo-theme-hiero Remove max-width from source/css/style.styl .outer clearfix() // max-width: (column-width + gutter-width) * columns + gutter-width margin: 40px auto padding: 0 gutter-width Change font-size of code block from source/css/_partial/highlight.styl $code-block background: $highlight-background margin: article-padding article-padding * 0 padding: 15px article-padding border-style: solid border-color: color-border border-width: 1px 0 overflow: auto color: $highlight-foreground font-size: 1.0em; line-height: 1em Change font-size of article-header from source/css/_partial/article.styl .article-header h1 margin: 0 0 3px 0; font-size: 26px; line-height: 1....

November 6, 2019 路 1 min 路 Khoa Pham

Dealing with CSS responsiveness in Wordpress

Issue #208 During the alpha test of LearnTalks, some of my friends reported that the screen is completely blank in the search page, and this happened in mobile only. This article is how I identify the problem and found a workaround for the issue, it may not be the solution, but at least the screen does not appear blank anymore. As someone who likes to keep up with tech via watching conference videos, I thought it might be a good idea to collect all of these to better search and explore later....

April 17, 2019 路 3 min 路 Khoa Pham