Skip to content

Replace manual SCSS with Tailwind CSS#94

Draft
nicodes with Copilot wants to merge 4 commits into
mainfrom
copilot/add-tailwind-replace-manual-css
Draft

Replace manual SCSS with Tailwind CSS#94
nicodes with Copilot wants to merge 4 commits into
mainfrom
copilot/add-tailwind-replace-manual-css

Conversation

Copilot AI commented Apr 14, 2026

Copy link
Copy Markdown
Contributor

Migrates all styling from hand-written SCSS/CSS modules to Tailwind CSS, removing the sass dependency entirely. Styles are defined as named CSS component classes using @apply in global.css, keeping templates clean with simple class names.

Changes

  • Dependencies: Added tailwindcss@^3 + @astrojs/tailwind@^5; removed sass
  • Config: Added tailwind.config.mjs (content glob over src/**); registered the integration in astro.config.mjs with applyBaseStyles: false
  • Global styles: global.scssglobal.css with @tailwind directives; all component styles defined via @apply in named classes (.nav, .card, .about-card, .form, .form-divider, .form-result-label); base font-size (24px), link color, body, and main layout set via @layer base
  • Components: All SCSS module imports removed; templates use simple semantic class names
    • Layout.astro — body styles moved to global.css
    • Nav.astro — uses .nav class
    • Card.astro — uses .card class
    • Form.svelte — uses .form, .form-divider, .form-result-label classes
    • pages/about/index.astro — uses .about-card class on the Card component
  • Deleted: global.scss, card.module.scss, nav.module.scss, form.module.scss, aboutPage.module.scss
  • Bugfix: Corrected pre-existing typo target"_blank"target="_blank" in Nav.astro

@vercel

vercel Bot commented Apr 14, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ctcalc Error Error Apr 21, 2026 6:18pm

@nicodes

nicodes commented Apr 21, 2026

Copy link
Copy Markdown
Owner

@copilot reduce the ammount of tailwind used

Copilot AI commented Apr 21, 2026

Copy link
Copy Markdown
Contributor Author

@copilot reduce the ammount of tailwind used

Done in commit 044ff65. All verbose inline utility strings have been moved out of the templates and into named CSS component classes in global.css using @apply. Templates now use simple class names (.nav, .card, .about-card, .form, .form-divider, .form-result-label) instead of long utility chains.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • telemetry.astro.build
    • Triggering command: /usr/local/bin/node node node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI requested a review from nicodes April 21, 2026 18:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants