Skip to content

Commit 197b78b

Browse files
eriandeveriandev
committed
refactor: update tailwind's config to v4
1 parent e5a2fa8 commit 197b78b

Some content is hidden

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

51 files changed

+1178
-797
lines changed

‎.vscode/css_custom_tailwind.json

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"version": 4.0,
3+
"atDirectives": [
4+
{
5+
"name": "@theme",
6+
"description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints",
7+
"references": [
8+
{
9+
"name": "Tailwind Documentation — Functions and directives",
10+
"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
11+
}
12+
]
13+
},
14+
{
15+
"name": "@source",
16+
"description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection",
17+
"references": [
18+
{
19+
"name": "Tailwind Documentation — Functions and directives",
20+
"url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
21+
}
22+
]
23+
},
24+
{
25+
"name": "@utility",
26+
"description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`",
27+
"references": [
28+
{
29+
"name": "Tailwind Documentation — Functions and directives",
30+
"url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
31+
}
32+
]
33+
},
34+
{
35+
"name": "@variant",
36+
"description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS",
37+
"references": [
38+
{
39+
"name": "Tailwind Documentation — Functions and directives",
40+
"url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
41+
}
42+
]
43+
},
44+
{
45+
"name": "@custom-variant",
46+
"description": "Use the `@custom-variant` directive to add a custom variant in your project",
47+
"references": [
48+
{
49+
"name": "Tailwind Documentation — Functions and directives",
50+
"url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
51+
}
52+
]
53+
},
54+
{
55+
"name": "@apply",
56+
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS",
57+
"references": [
58+
{
59+
"name": "Tailwind Documentation — Functions and directives",
60+
"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
61+
}
62+
]
63+
},
64+
{
65+
"name": "@reference",
66+
"description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context",
67+
"references": [
68+
{
69+
"name": "Tailwind Documentation — Functions and directives",
70+
"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
71+
}
72+
]
73+
}
74+
]
75+
}

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"css.customData": [".vscode/css_custom_tailwind.json"]
3+
}

‎apps/calculator-app/.vscode/css_custom_tailwind.json

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"version": 4.0,
3+
"atDirectives": [
4+
{
5+
"name": "@theme",
6+
"description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints",
7+
"references": [
8+
{
9+
"name": "Tailwind Documentation — Functions and directives",
10+
"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
11+
}
12+
]
13+
},
14+
{
15+
"name": "@source",
16+
"description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection",
17+
"references": [
18+
{
19+
"name": "Tailwind Documentation — Functions and directives",
20+
"url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
21+
}
22+
]
23+
},
24+
{
25+
"name": "@utility",
26+
"description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`",
27+
"references": [
28+
{
29+
"name": "Tailwind Documentation — Functions and directives",
30+
"url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
31+
}
32+
]
33+
},
34+
{
35+
"name": "@variant",
36+
"description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS",
37+
"references": [
38+
{
39+
"name": "Tailwind Documentation — Functions and directives",
40+
"url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
41+
}
42+
]
43+
},
44+
{
45+
"name": "@custom-variant",
46+
"description": "Use the `@custom-variant` directive to add a custom variant in your project",
47+
"references": [
48+
{
49+
"name": "Tailwind Documentation — Functions and directives",
50+
"url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
51+
}
52+
]
53+
},
54+
{
55+
"name": "@apply",
56+
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS",
57+
"references": [
58+
{
59+
"name": "Tailwind Documentation — Functions and directives",
60+
"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
61+
}
62+
]
63+
},
64+
{
65+
"name": "@reference",
66+
"description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context",
67+
"references": [
68+
{
69+
"name": "Tailwind Documentation — Functions and directives",
70+
"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
71+
}
72+
]
73+
}
74+
]
75+
}

‎apps/calculator-app/.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"css.customData": [".vscode/css_custom_tailwind.json"]
3+
}

‎apps/calculator-app/src/components/Display.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<article class="rounded-xl bg-color-screen px-8 py-6">
1+
<article class="rounded-xl bg-screen px-8 py-6">
22
<input
33
id="input-display"
44
class="fix-color w-full overflow-x-auto bg-transparent text-right text-5xl leading-none text-primary focus:outline-none"

‎apps/calculator-app/src/components/Keypad.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Key from '@/components/Key.astro'
33
import { keyList } from '@/scripts/consts.ts'
44
---
55

6-
<section class="w-full rounded-xl bg-color-keypad p-8">
6+
<section class="w-full rounded-xl bg-keypad p-8">
77
<article class="mb-4 grid grid-cols-[repeat(4,4rem)] gap-4">
88
{
99
keyList.map(({ key, code }) =>

‎apps/calculator-app/src/components/ThemeSwitch.astro

+3-7
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<div class="flex content-center items-center gap-x-6">
88
<span class="mt-1.5 leading-none">theme</span>
9-
<div class="relative grid h-8 w-[100px] grid-cols-3 rounded-full bg-color-keypad">
9+
<div class="relative grid h-8 w-[100px] grid-cols-3 rounded-full bg-keypad">
1010
<input type="radio" id="step-1" name="switch-step" value="1" class="hidden cursor-pointer" />
1111
<label aria-label="Step 1" for="step-1" class="cursor-pointer"></label>
1212

@@ -16,16 +16,12 @@
1616
<input type="radio" id="step-3" name="switch-step" value="3" class="hidden cursor-pointer" />
1717
<label aria-label="Step 3" for="step-3" class="cursor-pointer"></label>
1818

19-
<span id="selector" class="absolute left-0 ml-1.5 mt-1.5 h-5 w-5 rounded-full bg-key-tertiary-light"></span>
19+
<span id="selector" class="absolute left-0 transition-[left] duration-300 ease-in-out ml-1.5 mt-1.5 h-5 w-5 rounded-full bg-key-tertiary-light"></span>
2020
</div>
2121
</div>
2222
</article>
2323

2424
<style>
25-
#selector {
26-
transition: 0.3s left ease;
27-
}
28-
2925
#step-1:checked ~ #selector {
3026
left: 0;
3127
}
@@ -35,6 +31,6 @@
3531
}
3632

3733
#step-3:checked ~ #selector {
38-
left: 69%;
34+
left: 68%;
3935
}
4036
</style>

‎apps/calculator-app/src/layouts/Layout.astro

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import MetaTags from 'shared/components/MetaTags.astro'
3-
import '@/styles.css'
3+
import '@/styles/app.css'
44
---
55

66
<!doctype html>
@@ -14,7 +14,7 @@ import '@/styles.css'
1414
<script src="@/scripts/events.ts"></script>
1515
</head>
1616

17-
<body class="theme-1 grid min-h-screen content-center items-center gap-y-4 bg-color-main font-league-spartan">
17+
<body class="theme-1 grid min-h-screen content-center items-center gap-y-4 bg-main font-league-spartan">
1818
<slot />
1919
</body>
2020
</html>

‎apps/calculator-app/src/styles.css

-138
This file was deleted.

0 commit comments

Comments
 (0)