Skip to content

Instantly share code, notes, and snippets.

View junchaw's full-sized avatar
💭
Ze

JC junchaw

💭
Ze
View GitHub Profile
@junchaw
junchaw / .zshrc
Created April 29, 2021 08:46
cd to my project
# cd to my project
export PROJECTS="$HOME/projects"
p () {
cd $PROJECTS/${1}
}
_p_completions()
{
COMPREPLY=($(compgen -W "$(ls $PROJECTS)" -- "${COMP_WORDS[1]}"))
@junchaw
junchaw / tailwind.config.js
Created March 30, 2023 22:54
A simple plugin to enable "hover" and "pointer" media query in TailwindCSS
plugin(function ({addVariant}) {
addVariant('hoverable-no', '@media (hover: none)')
addVariant('hoverable', '@media (hover: hover)')
addVariant('pointer-none', '@media (pointer: none)')
addVariant('pointer-find', '@media (pointer: fine)')
addVariant('pointer-coarse', '@media (pointer: coarse)')
addVariant('interact-mouse', '@media (hover: hover) and (pointer: fine)')
addVariant('interact-remote', '@media (hover: hover) and (pointer: coarse)')
addVariant('interact-stylus', '@media (hover: none) and (pointer: fine)')
addVariant('interact-finger', '@media (hover: none) and (pointer: coarse)')
@junchaw
junchaw / badge.tsx
Last active April 4, 2023 06:12
TailwindCSS class management with cva (Class Variance Authority) in a React component
import React from "react";
import classNames from "classnames";
import {cva, VariantProps} from "cva";
export const badge = cva(["inline-fcc", "rounded-full", "shadow"], {
variants: {
size: {
responsiveXs: [
"px-2",
"py-[.125rem]",