Css 7

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" …

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 …

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`` …

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: …

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: …

How to edit hexo theme hiero

Issue #494

Code

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 …

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 …