Skip to content

Commit bae4bdf

Browse files
kettanaitokettanaito
committed
update to tailwindcss@4
1 parent ed8af13 commit bae4bdf

File tree

174 files changed

+1137
-1989
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

174 files changed

+1137
-1989
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules
33
workspace/
44
**/.cache/
55
**/build/
6+
**/dist/
67
**/public/build
78
**/playwright-report
89
data.db

‎exercises/01.sunsetting-jsdom/01.problem.break-jsdom/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
"name": "exercises_01.sunsetting-jsdom_01.problem.break-jsdom",
44
"scripts": {
55
"dev": "vite --port=4000",
6-
"test": "vitest"
6+
"test": "vitest",
7+
"build": "vite build"
78
},
89
"dependencies": {
910
"react": "^19.0.0",
1011
"react-dom": "^19.0.0"
1112
},
1213
"devDependencies": {
14+
"@tailwindcss/vite": "^4.0.7",
1315
"@testing-library/dom": "^10.4.0",
1416
"@testing-library/react": "^16.1.0",
1517
"@testing-library/user-event": "^14.5.2",
1618
"@types/react": "^19.0.6",
1719
"@types/react-dom": "^19.0.3",
1820
"@vitejs/plugin-react": "^4.3.4",
1921
"@vitest/browser": "^3.0.5",
20-
"autoprefixer": "^10.4.20",
2122
"jsdom": "^26.0.0",
22-
"postcss": "^8.4.49",
23-
"tailwindcss": "^3.4.17",
23+
"tailwindcss": "^4.0.7",
2424
"vite": "^6.0.7",
2525
"vitest": "^3.0.5"
2626
}

‎exercises/01.sunsetting-jsdom/01.problem.break-jsdom/postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/01.sunsetting-jsdom/01.problem.break-jsdom/src/index.css

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
22

3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
3+
@import 'tailwindcss';
4+
5+
@theme {
6+
--font-sans: 'DM Sans';
7+
--default-ring-width: 3px;
8+
--default-ring-color: var(--color-blue-500);
9+
}
610

711
html {
812
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9-
10-
font-family:
11-
'DM Sans',
12-
system-ui,
13-
-apple-system,
14-
BlinkMacSystemFont,
15-
'Segoe UI',
16-
Roboto,
17-
Oxygen,
18-
Ubuntu,
19-
Cantarell,
20-
'Open Sans',
21-
'Helvetica Neue',
22-
sans-serif;
23-
font-style: normal;
24-
font-optical-sizing: auto;
2513
}

‎exercises/01.sunsetting-jsdom/01.problem.break-jsdom/vite.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/// <reference types="vitest" />
22
import { defineConfig } from 'vite'
33
import react from '@vitejs/plugin-react'
4+
import tailwindcss from '@tailwindcss/vite'
45

56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(), tailwindcss()],
78
test: {
89
globals: true,
910
environment: 'jsdom',

‎exercises/01.sunsetting-jsdom/01.solution.break-jsdom/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
"name": "exercises_01.sunsetting-jsdom_01.solution.break-jsdom",
44
"scripts": {
55
"dev": "vite --port=4000",
6-
"test": "vitest"
6+
"test": "vitest",
7+
"build": "vite build"
78
},
89
"dependencies": {
910
"react": "^19.0.0",
1011
"react-dom": "^19.0.0"
1112
},
1213
"devDependencies": {
14+
"@tailwindcss/vite": "^4.0.7",
1315
"@testing-library/dom": "^10.4.0",
1416
"@testing-library/react": "^16.1.0",
1517
"@types/react": "^19.0.6",
1618
"@types/react-dom": "^19.0.3",
1719
"@vitejs/plugin-react": "^4.3.4",
1820
"@vitest/browser": "^3.0.5",
19-
"autoprefixer": "^10.4.20",
2021
"jsdom": "^26.0.0",
21-
"postcss": "^8.4.49",
22-
"tailwindcss": "^3.4.17",
22+
"tailwindcss": "^4.0.7",
2323
"vite": "^6.0.7",
2424
"vitest": "^3.0.5"
2525
}

‎exercises/01.sunsetting-jsdom/01.solution.break-jsdom/postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/01.sunsetting-jsdom/01.solution.break-jsdom/src/index.css

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
22

3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
3+
@import 'tailwindcss';
4+
5+
@theme {
6+
--font-sans: 'DM Sans';
7+
--default-ring-width: 3px;
8+
--default-ring-color: var(--color-blue-500);
9+
}
610

711
html {
812
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9-
10-
font-family:
11-
'DM Sans',
12-
system-ui,
13-
-apple-system,
14-
BlinkMacSystemFont,
15-
'Segoe UI',
16-
Roboto,
17-
Oxygen,
18-
Ubuntu,
19-
Cantarell,
20-
'Open Sans',
21-
'Helvetica Neue',
22-
sans-serif;
23-
font-style: normal;
24-
font-optical-sizing: auto;
2513
}

‎exercises/01.sunsetting-jsdom/01.solution.break-jsdom/vite.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/// <reference types="vitest" />
22
import { defineConfig } from 'vite'
33
import react from '@vitejs/plugin-react'
4+
import tailwindcss from '@tailwindcss/vite'
45

56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(), tailwindcss()],
78
test: {
89
globals: true,
910
environment: 'jsdom',

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/README.mdx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,14 @@ The installation step is done, and now it's time to configure Vitest is it can r
2929

3030
To enable the Browser Mode in Vitest, I need to set `test.browser.enabled` to `true` in my `vite.config.ts`/`vitest.config.ts`:
3131

32-
```ts filename=vite.config.ts remove=9 add=10-12
32+
```ts filename=vite.config.ts remove=10 add=11-13
3333
/// <reference types="vitest" />
3434
import { defineConfig } from 'vite'
3535
import react from '@vitejs/plugin-react'
36+
import tailwindcss from '@tailwindcss/vite'
3637

3738
export default defineConfig({
38-
plugins: [react()],
39+
plugins: [react(), tailwindcss()],
3940
test: {
4041
globals: true,
4142
environment: 'jsdom',
@@ -48,13 +49,14 @@ export default defineConfig({
4849

4950
As the next step, I need to tell Vitest what browsers I want for testing my components. Let's use Chromium by setting the `test.browser.instances` correctly:
5051

51-
```ts filename=vite.config.ts add=10-14
52+
```ts filename=vite.config.ts add=11-15
5253
/// <reference types="vitest" />
5354
import { defineConfig } from 'vite'
5455
import react from '@vitejs/plugin-react'
56+
import tailwindcss from '@tailwindcss/vite'
5557

5658
export default defineConfig({
57-
plugins: [react()],
59+
plugins: [react(), tailwindcss()],
5860
test: {
5961
browser: {
6062
enabled: true,

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
"name": "exercises_02.vitest-browser-mode_01.problem.installation-and-setup",
44
"scripts": {
55
"dev": "vite --port=4000",
6-
"test": "vitest"
6+
"test": "vitest",
7+
"build": "vite build"
78
},
89
"dependencies": {
910
"react": "^19.0.0",
1011
"react-dom": "^19.0.0"
1112
},
1213
"devDependencies": {
14+
"@tailwindcss/vite": "^4.0.7",
1315
"@testing-library/dom": "^10.4.0",
1416
"@testing-library/react": "^16.1.0",
1517
"@types/react": "^19.0.6",
1618
"@types/react-dom": "^19.0.3",
1719
"@vitejs/plugin-react": "^4.3.4",
1820
"@vitest/browser": "^3.0.5",
19-
"autoprefixer": "^10.4.20",
2021
"jsdom": "^26.0.0",
21-
"postcss": "^8.4.49",
22-
"tailwindcss": "^3.4.17",
22+
"tailwindcss": "^4.0.7",
2323
"vite": "^6.0.7",
2424
"vitest": "^3.0.5"
2525
}

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/src/index.css

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
22

3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
3+
@import 'tailwindcss';
4+
5+
@theme {
6+
--font-sans: 'DM Sans';
7+
--default-ring-width: 3px;
8+
--default-ring-color: var(--color-blue-500);
9+
}
610

711
html {
812
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9-
10-
font-family:
11-
'DM Sans',
12-
system-ui,
13-
-apple-system,
14-
BlinkMacSystemFont,
15-
'Segoe UI',
16-
Roboto,
17-
Oxygen,
18-
Ubuntu,
19-
Cantarell,
20-
'Open Sans',
21-
'Helvetica Neue',
22-
sans-serif;
23-
font-style: normal;
24-
font-optical-sizing: auto;
2513
}

‎exercises/02.vitest-browser-mode/01.problem.installation-and-setup/vite.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/// <reference types="vitest" />
22
import { defineConfig } from 'vite'
33
import react from '@vitejs/plugin-react'
4+
import tailwindcss from '@tailwindcss/vite'
45

56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(), tailwindcss()],
78
test: {
89
environment: 'jsdom',
910
},

‎exercises/02.vitest-browser-mode/01.solution.installation-and-setup/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
"name": "exercises_02.vitest-browser-mode_01.solution.installation-and-setup",
44
"scripts": {
55
"dev": "vite --port=4000",
6-
"test": "vitest"
6+
"test": "vitest",
7+
"build": "vite build"
78
},
89
"dependencies": {
910
"react": "^19.0.0",
1011
"react-dom": "^19.0.0"
1112
},
1213
"devDependencies": {
14+
"@tailwindcss/vite": "^4.0.7",
1315
"@types/react": "^19.0.6",
1416
"@types/react-dom": "^19.0.3",
1517
"@vitejs/plugin-react": "^4.3.4",
1618
"@vitest/browser": "^3.0.5",
17-
"autoprefixer": "^10.4.20",
18-
"postcss": "^8.4.49",
19-
"tailwindcss": "^3.4.17",
19+
"tailwindcss": "^4.0.7",
2020
"vite": "^6.0.7",
2121
"vitest": "^3.0.5",
2222
"vitest-browser-react": "^0.0.4"

‎exercises/02.vitest-browser-mode/01.solution.installation-and-setup/postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎exercises/02.vitest-browser-mode/01.solution.installation-and-setup/src/index.css

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
22

3-
@tailwind base;
4-
@tailwind components;
5-
@tailwind utilities;
3+
@import 'tailwindcss';
4+
5+
@theme {
6+
--font-sans: 'DM Sans';
7+
--default-ring-width: 3px;
8+
--default-ring-color: var(--color-blue-500);
9+
}
610

711
html {
812
@apply flex size-full items-center justify-center bg-slate-100 p-10;
9-
10-
font-family:
11-
'DM Sans',
12-
system-ui,
13-
-apple-system,
14-
BlinkMacSystemFont,
15-
'Segoe UI',
16-
Roboto,
17-
Oxygen,
18-
Ubuntu,
19-
Cantarell,
20-
'Open Sans',
21-
'Helvetica Neue',
22-
sans-serif;
23-
font-style: normal;
24-
font-optical-sizing: auto;
2513
}

‎exercises/02.vitest-browser-mode/01.solution.installation-and-setup/vite.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/// <reference types="vitest" />
22
import { defineConfig } from 'vite'
33
import react from '@vitejs/plugin-react'
4+
import tailwindcss from '@tailwindcss/vite'
45

56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(), tailwindcss()],
78
test: {
89
globals: true,
910
browser: {

‎exercises/02.vitest-browser-mode/02.problem.migrate-the-test/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
"name": "exercises_02.vitest-browser-mode_02.problem.migrate-the-test",
44
"scripts": {
55
"dev": "vite --port=4000",
6-
"test": "vitest"
6+
"test": "vitest",
7+
"build": "vite build"
78
},
89
"dependencies": {
910
"react": "^19.0.0",
1011
"react-dom": "^19.0.0"
1112
},
1213
"devDependencies": {
14+
"@tailwindcss/vite": "^4.0.7",
1315
"@types/react": "^19.0.6",
1416
"@types/react-dom": "^19.0.3",
1517
"@vitejs/plugin-react": "^4.3.4",
1618
"@vitest/browser": "^3.0.5",
17-
"autoprefixer": "^10.4.20",
18-
"postcss": "^8.4.49",
19-
"tailwindcss": "^3.4.17",
19+
"tailwindcss": "^4.0.7",
2020
"vite": "^6.0.7",
2121
"vitest": "^3.0.5",
2222
"vitest-browser-react": "^0.0.4"

‎exercises/02.vitest-browser-mode/02.problem.migrate-the-test/postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)