remark-frontmatter-starter
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.
Viewing readonly version of main branch: v700View latest version
Replace existing custom CSS in src/
and styles/
with Tailwind CSS and Daisy UI components, in incremental steps with tests after each.
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.
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
orApp.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.
Tasks:
- Add
@import
statements instyles/index.css
for each CSS file (markdown.css
,callout.css
,blockquote.css
,accordion.css
,tabs.css
,tables.css
, etc.) so they remain separate but are included viaindex.css
. - Update
head.ts
to only include a single<link>
forindex.css
. - Update
config.ts
to reference onlycssUrl
forindex.css
. - Remove individual stylesheet links in
buildHead
.
Stop and test: Reload the app and verify all styles apply correctly with only index.css
.
Tasks:
- Inventory components using custom CSS classes (search
className="
insrc/
). - Components to migrate:
- Callouts (
callout
,callout-info
,callout-warning
,callout-error
,callout-tip
,callout-note
) - Error messages (
error-message
) - Sidebar toggle (
sidebar-toggle
) - Sidebar container (
sidebar
) - Main content container (
main-content
,content-container
) - Table of contents sidebar (
toc-sidebar
) - Navigation menu (
doc-nav
,active
)
- Callouts (
- For each component:
- Replace class names with Tailwind/Daisy UI classes.
- Remove related CSS rules from
styles/
.
Stop and test: Verify component layout and styles.
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.
Tasks:
- Replace custom grid/flex layouts with Tailwind utilities.
- Update margins, paddings to use utility classes.
Stop and test: Validate page layouts across breakpoints.
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.