• Townie
    AI
  • Blog
  • Docs
  • Pricing
Log inSign up
arfan

arfan

remark-frontmatter-starter

Remix of jxnblk/remark-frontmatter-starter
Unlisted
Like
1
remark-frontmatter-starter
Home
Code
6
docs
12
src
7
styles
8
tmp
7
H
App.tsx
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
tmp
/
refactor-css-plan.md
Code
/
tmp
/
refactor-css-plan.md
Search
4/18/2025
Viewing readonly version of main branch: v678
View latest version
refactor-css-plan.md

Refactor CSS to Tailwind CSS + Daisy UI

Goal

Replace existing custom CSS in src/ and styles/ with Tailwind CSS and Daisy UI components, in incremental steps with tests after each.

Steps

Step 1: CDN Setup

Tasks:

  • No installation required.
  • In head.ts head, add:
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

Stop and test: Reload the app, add a Daisy UI class (e.g. btn) to a component, verify the style applies.

Step 2: Remove Global CSS Resets

Tasks:

  • Locate any global resets (e.g. reset.css) in styles/.
  • Create a new file styles/daisy-ui.css.
  • Move necessary reset rules into daisy-ui.css under Tailwind’s @layer base.
  • Comment out or remove old import statements for resets in src/index.tsx or App.tsx.
  • Import styles/daisy-ui.css in the main CSS entry (e.g., index.css).

Stop and test: Confirm global styles (default fonts, margins) remain appropriate.

Step 3: Migrate Component Styles

Tasks:

  • Inventory components using custom CSS classes (search className=" in src/).
  • For one component at a time:
    • Replace class names with Tailwind/Daisy UI classes.
    • Remove related CSS rules from styles/.

Stop and test: Verify component layout and styles.

Step 4: Apply Daisy UI Components

Tasks:

  • Identify common UI patterns (buttons, cards, forms).
  • Replace with Daisy UI prebuilt classes (e.g. btn, card).

Stop and test: Check visual consistency and responsiveness.

Step 5: Refactor Layout & Utilities

Tasks:

  • Replace custom grid/flex layouts with Tailwind utilities.
  • Update margins, paddings to use utility classes.

Stop and test: Validate page layouts across breakpoints.

Step 6: Clean Up

Tasks:

  • Delete unused CSS files in styles/.
  • Remove obsolete imports in code.
  • Run production build to confirm no CSS errors.

Stop and test: Build succeeds, UI unchanged.


Proceed one step at a time and pause after each for testing.

FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareersBrandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.