Feature | Tailwind v3 -> v4, Laravel Mix -> Vite #839

chrispelzer · 2025-11-18T15:56:24Z

Tailwind v3 -> v4, Laravel Mix -> Vite

Upgrade from Tailwind v3 to Tailwind v4 which also switches from Laravel Mix to using Vite

Reason for Change

Why was this change made? Briefly explain the motivation or issue being addressed.

Demo / Context

Add any context that would help reviewers understand the update. Include before/after info where helpful.

Relevant Links (Jira, Trello, GitHub Issues, etc.)
Screenshots or screen recordings
Log outputs
Console errors / browser messages

Final Checklist

I have reviewed my code and it follows project standards
I have tested the changes locally
I have added or updated relevant documentation
I have added tests (if applicable)
I have communicated with the team about necessary post-deploy actions

Testing Notes

Optional: Explain any special testing considerations for this PR.

Edge cases to try
Features that need manual confirmation
Known limitations or risks

Thanks for your contribution! 🎉

…/sass-lang.com/documentation/cli/migrator/) with the command `sass-migrator module --migrate-deps resources/scss/main.scss`

… `!optional` ``` [vite:css] [sass] The target selector was not found. Use "@extend .button !optional" to avoid this error. ╷ 139 │ @extend .button; │ ^^^^^^^^^^^^^^^ ╵ resources/scss/components/_formy.scss 139:9 load-css() resources/scss/main.scss 27:1 root stylesheet ``` ``` [vite:css] [sass] The target selector was not found. Use "@extend .gold-gradient-button !optional" to avoid this error. ╷ 17 │ @extend .gold-gradient-button; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ resources/scss/components/_flag.scss 17:13 load-css() resources/scss/main.scss 22:1 root stylesheet ```

… from the webpack.mix.js utilizing native nodejs instead of laravel mix

… vite static asset versioning and update references to the file rather than the built file for vite to account for

… from the filename to prepare for the tailwind4 upgrade tool

…de from tailwind3 to tailwind4

… user setup

…ded for now till we can figure out working style, then we can convert over to pure css issue with BEM currently in components/hero.css tailwindlabs/tailwindcss#18522 (comment)

…lwind.config.js since screens are not used anymore in tailwind4 correct stylelint to allow nesting-selector-no-missing-scoping-root to still work within the @Utility {utility name}

… with &::after taking on an error due to `::after:is()` ``` This errors if applied ▲ [WARNING] Unexpected ")" [css-syntax-error] <stdin>:2:70272: 2 │ ...er){.play-video-button:after:is(),.play-video-button:after:hover... ╵ @apply group-hover:opacity-100 hover:opacity-100 ```

chrispelzer had a problem deploying to build November 18, 2025 15:56 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from dd82d69 to 86b3552 Compare November 18, 2025 16:10

chrispelzer had a problem deploying to build November 18, 2025 16:10 — with GitHub Actions Failure

chrispelzer had a problem deploying to build November 18, 2025 16:12 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 86b3552 to c62500c Compare November 18, 2025 16:51

chrispelzer had a problem deploying to build November 18, 2025 16:51 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from c62500c to 32118ef Compare November 18, 2025 16:59

chrispelzer had a problem deploying to build November 18, 2025 16:59 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 32118ef to 1092a13 Compare November 18, 2025 18:59

chrispelzer had a problem deploying to build November 18, 2025 19:00 — with GitHub Actions Failure

chrispelzer had a problem deploying to build November 19, 2025 17:20 — with GitHub Actions Failure

chrispelzer changed the title ~~Feature/tailwind 4~~ Feature | Tailwind v3 -> v4, NodeJS v22 -> NodeJS v24 Nov 19, 2025

chrispelzer changed the title ~~Feature | Tailwind v3 -> v4, NodeJS v22 -> NodeJS v24~~ Feature | Tailwind v3 -> v4, Laravel Mix -> Vite Nov 19, 2025

chrispelzer force-pushed the feature/tailwind-4 branch from 367174c to fe829f1 Compare November 19, 2025 17:59

chrispelzer had a problem deploying to build November 19, 2025 17:59 — with GitHub Actions Failure

chrispelzer had a problem deploying to build November 19, 2025 18:01 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from e6728b6 to 7f1d62d Compare November 21, 2025 16:55

chrispelzer had a problem deploying to build November 21, 2025 16:55 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 7f1d62d to 02268f0 Compare November 24, 2025 20:40

chrispelzer had a problem deploying to build November 24, 2025 20:40 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 02268f0 to 456190e Compare November 24, 2025 20:44

chrispelzer had a problem deploying to build November 24, 2025 20:44 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 456190e to 7485b58 Compare November 24, 2025 20:47

chrispelzer had a problem deploying to build November 24, 2025 20:47 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 7485b58 to ae81ac4 Compare November 24, 2025 21:24

chrispelzer had a problem deploying to build November 24, 2025 21:24 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from ae81ac4 to 5550a9b Compare November 24, 2025 21:27

chrispelzer had a problem deploying to build November 24, 2025 21:27 — with GitHub Actions Failure

chrispelzer had a problem deploying to build November 24, 2025 21:49 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from fd8ecf7 to 63655db Compare November 25, 2025 20:16

chrispelzer had a problem deploying to build November 25, 2025 20:16 — with GitHub Actions Failure

chrispelzer force-pushed the feature/tailwind-4 branch from 63655db to 865b2da Compare November 25, 2025 20:31

chrispelzer had a problem deploying to build November 25, 2025 20:31 — with GitHub Actions Failure

chrispelzer had a problem deploying to build December 2, 2025 21:30 — with GitHub Actions Failure

chrispelzer and others added 20 commits December 2, 2025 16:31

refactor: upgrade to nodejs v24 LTS

f7165dd

Add npm dependencies

4bb3245

Update build scripts

81c3602

Configure Vite

dbe4220

Remove webpack.mix.js

38d84bb

Add PostCSS configuration for Tailwind

958ebbd

Use new @vite Blade directive

c1456f6

Ignore build assets

4297a07

chore: add back removed webpack.config.js for reference

c96a5d7

refactor: updated main.scss @import using tool sass-migrator (https:/…

63930cb

…/sass-lang.com/documentation/cli/migrator/) with the command `sass-migrator module --migrate-deps resources/scss/main.scss`

refactor: copy over the asset copying and other necessary build steps…

e3a381e

… from the webpack.mix.js utilizing native nodejs instead of laravel mix

refactor: add importing of images/fonts within the main.js to utilize…

715b02a

… vite static asset versioning and update references to the file rather than the built file for vite to account for

refactor: rename scss folder and filenames to be css and remove the _…

615af55

… from the filename to prepare for the tailwind4 upgrade tool

refactor: run npx @tailwindcss/upgrade within root of site to upgra…

35ea6e2

…de from tailwind3 to tailwind4

fix: correct formatting of gitflow yaml file

65389a0

feature: add laravel-boost capabilities, but add configuration as per…

c60773b

… user setup

refactor: keeping the tailwind.config.js and only tweaking what's nee…

0bb8792

…ded for now till we can figure out working style, then we can convert over to pure css issue with BEM currently in components/hero.css tailwindlabs/tailwindcss#18522 (comment)

refactor: move over the screens/breakpoint to the @theme from the tai…

3d85bbd

…lwind.config.js since screens are not used anymore in tailwind4 correct stylelint to allow nesting-selector-no-missing-scoping-root to still work within the @Utility {utility name}

chrispelzer force-pushed the feature/tailwind-4 branch from 757f20a to 6b848cd Compare December 2, 2025 21:31

chrispelzer had a problem deploying to build December 2, 2025 21:31 — with GitHub Actions Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature | Tailwind v3 -> v4, Laravel Mix -> Vite #839

Feature | Tailwind v3 -> v4, Laravel Mix -> Vite #839

Uh oh!

chrispelzer commented Nov 18, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Feature | Tailwind v3 -> v4, Laravel Mix -> Vite #839

Are you sure you want to change the base?

Feature | Tailwind v3 -> v4, Laravel Mix -> Vite #839

Uh oh!

Conversation

chrispelzer commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tailwind v3 -> v4, Laravel Mix -> Vite

Reason for Change

Demo / Context

Final Checklist

Testing Notes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chrispelzer commented Nov 18, 2025 •

edited

Loading