nonissue / consequent

Next.js Starter with Tailwind, Typescript, Radix Colors and Dark Mode

Consequent

Next.js starter with Typescript & Tailwind.css (feat. next-themes for dark mode).

Issues

• bg-opacity-x utils don't work with custom radix colors
  • That said, using radix colors plugins means we automatically get theming w/ light / dark
• custom radix colors don't get inline color previews in VSCode

Tasks

Misc

• Add docs
  • Features
    • TS
    • ESLint
    • Husky
    • Themes
    • getLayout
  • Set up
  • Usage
• Add react-error-boundary
  • https://github.com/lightsound/nexst-tailwind/tree/main/src/layout
• Update index
• Add docs route
• Add favicon, opengraph metadata, etc.
• Remove providers component
• Add Husky
  • Add package
  • Add pre-commit
  • Add post-merge
• Add zustand
  • Add package
  • Remove custom context implementation currently being used
• Cleanup eslint config
• Figure out color preview for radix-colors
• Fix paths in tsconfig.json
  • Just use relative imports?
• Use data/site.config.json in Header
  • Removed altogether
• Cleanup tailwind.config.js
  • Remove prose customizations
    • Eh, I like the prose customizations.
    • Though if I use radix-colors plugin, it automatically changes color variant between light/dark
  • Remove homemade radix plugin
• use only Inter as custom font
  • Remove Recursive
  • Remove Space Mono
  • Remove Space Grotesk
  • Cleanup tailwind config
• Figure out which postcss plugins are actually needed
• Remove unneeded postcss plugins
• Remove @babel/core
• Remove tailwind-typography
  • Remove plugin
  • Remove customization in tailwind.config.js
  • Really shouldn't be customizing styling in tailwind config, it would be easier just to do it from scratch

Inspiration/Resources

Tailwind Typography: Dark Mode

• https://sergiodxa.com/articles/use-tailwindcss-typography-with-dark-mode-styles
• Reference custom fontFamily:
  • tailwindlabs/tailwindcss-typography#14

eslint config

• https://paulintrognon.fr/blog/post/typescript-prettier-eslint-next-js
• https://www.npmjs.com/package/eslint-config-nextjs
• https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest

Inter Font Config

• See src/styles/font.css.
• google/fonts#2386 (comment)

# pyftsubset has to be installed
pyftsubset Inter.ttf \
  --unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD" \
  --layout-features="" \
  --flavor="woff2" \
  --output-file="Inter-subset.woff2"