Skip to content

Commit d750839

Browse files
SebKaySebKay
authored
Tailwind improvements (#85)
* Wrap all custom styles in a "components" layer * Fix `.content` not working due to nesting * Update forms.css * Update buttons.css * Add typography styles * Update typography.css * Install postcss-nested as a dev dependency * Update postcss.config.cjs * Update test.yml
1 parent 1bcddbc commit d750839

File tree

9 files changed

+174
-131
lines changed

9 files changed

+174
-131
lines changed

‎.github/workflows/test.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ jobs:
1515
with:
1616
php-version: 8.2
1717
tools: composer:v2
18-
coverage: none
1918

2019
- name: Get Cache Directory
2120
id: composer-cache-dir
@@ -40,4 +39,4 @@ jobs:
4039
run: composer lint
4140

4241
- name: Run Tests
43-
run: composer test
42+
run: composer test:coverage

‎bun.lockb‎

2.02 KB
Binary file not shown.

‎package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
11
{
2-
"private": true,
3-
"type": "module",
4-
"scripts": {
5-
"dev": "vite",
6-
"build": "vite build"
7-
},
82
"devDependencies": {
93
"@heroicons/vue": "^2.1.5",
104
"@inertiajs/vue3": "^1.2.0",
@@ -15,8 +9,15 @@
159
"laravel-vite-plugin": "^1.0.5",
1610
"postcss": "^8.4.47",
1711
"postcss-import": "^16.1.0",
12+
"postcss-nested": "^6.2.0",
1813
"tailwindcss": "^3.4.12",
1914
"vite": "^5.4.6",
2015
"vue": "^3.5.6"
21-
}
16+
},
17+
"private": true,
18+
"scripts": {
19+
"dev": "vite",
20+
"build": "vite build"
21+
},
22+
"type": "module"
2223
}

‎postcss.config.cjs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
'postcss-import': {},
43
'tailwindcss': {},
54
'autoprefixer': {},
65
}

‎resources/css/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "tailwindcss/components";
33
@import "tailwindcss/utilities";
44

5+
@import "@css/typography.css";
56
@import "@css/forms.css";
67
@import "@css/buttons.css";
78
@import "@css/content.css";

‎resources/css/buttons.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
.button {
2-
@apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-colors ease-in-out duration-200;
3-
}
1+
@layer components {
2+
.button {
3+
@apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-all ease-in-out duration-200;
4+
}
5+
6+
.button-full {
7+
@apply w-full text-center justify-center;
8+
}
49

5-
.button-full {
6-
@apply w-full text-center justify-center;
10+
.button[disabled] {
11+
@apply pointer-events-none opacity-50;
12+
}
713
}

‎resources/css/content.css‎

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,95 @@
1-
.content {
2-
h1,
3-
h2,
4-
h3,
5-
h4,
6-
h5,
7-
h6 {
8-
@apply text-brand-900 font-heading;
9-
10-
a {
11-
@apply text-brand-800 hover:no-underline;
1+
@layer components {
2+
.content {
3+
h1,
4+
h2,
5+
h3,
6+
h4,
7+
h5,
8+
h6 {
9+
@apply text-brand-900 font-heading;
10+
11+
a {
12+
@apply text-brand-800 hover:no-underline;
13+
}
1214
}
13-
}
1415

15-
h1 {
16-
@apply text-4xl md:text-5xl;
17-
}
16+
h1 {
17+
@apply text-4xl md:text-5xl;
18+
}
1819

19-
h2 {
20-
@apply text-3xl;
21-
}
20+
h2 {
21+
@apply text-3xl;
22+
}
2223

23-
h3 {
24-
@apply text-2xl;
25-
}
24+
h3 {
25+
@apply text-2xl;
26+
}
2627

27-
h4 {
28-
@apply text-xl;
29-
}
28+
h4 {
29+
@apply text-xl;
30+
}
3031

31-
h5 {
32-
@apply text-lg;
33-
}
32+
h5 {
33+
@apply text-lg;
34+
}
3435

35-
h6 {
36-
@apply text-base;
37-
}
36+
h6 {
37+
@apply text-base;
38+
}
3839

39-
li {
40-
@apply ml-8;
41-
}
40+
li {
41+
@apply ml-8;
42+
}
4243

43-
a {
44-
@apply hover:underline;
45-
}
44+
a {
45+
@apply hover:underline;
46+
}
4647

47-
ul li {
48-
@apply list-disc;
49-
}
48+
ul li {
49+
@apply list-disc;
50+
}
5051

51-
ol li {
52-
@apply list-decimal;
53-
}
52+
ol li {
53+
@apply list-decimal;
54+
}
5455

55-
strong {
56-
@apply font-bold;
57-
}
56+
strong {
57+
@apply font-bold;
58+
}
5859

59-
blockquote {
60-
@apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
61-
}
60+
blockquote {
61+
@apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
62+
}
6263

63-
table {
64-
@apply w-full text-sm text-left;
65-
}
64+
table {
65+
@apply w-full text-sm text-left;
66+
}
6667

67-
th {
68-
@apply p-4 font-bold bg-brand-200;
69-
}
68+
th {
69+
@apply p-4 font-bold bg-brand-200;
70+
}
7071

71-
td {
72-
@apply p-4 font-medium;
73-
}
72+
td {
73+
@apply p-4 font-medium;
74+
}
7475

75-
tr:not(:last-child) td {
76-
@apply border-b border-brand-200;
77-
}
76+
tr:not(:last-child) td {
77+
@apply border-b border-brand-200;
78+
}
7879

79-
> * + * {
80-
@apply mt-6;
81-
}
80+
> * + * {
81+
@apply mt-6;
82+
}
8283

83-
* {
84-
& + h1,
85-
& + h2,
86-
& + h3,
87-
& + h4,
88-
& + h5,
89-
& + h6 {
90-
@apply mt-12;
84+
* {
85+
& + h1,
86+
& + h2,
87+
& + h3,
88+
& + h4,
89+
& + h5,
90+
& + h6 {
91+
@apply mt-12;
92+
}
9193
}
9294
}
9395
}

‎resources/css/forms.css‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,64 @@
1-
.form-row {
2-
@apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-3;
3-
}
1+
@layer components {
2+
.form-row {
3+
@apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
4+
}
45

5-
.form-col {
6-
@apply col-span-full;
7-
}
6+
.form-col {
7+
@apply col-span-full;
8+
}
89

9-
label {
10-
&[for] {
11-
@apply cursor-pointer;
10+
.form-col-2 {
11+
@apply col-span-2;
1212
}
13-
}
1413

15-
.label {
16-
@apply pb-3 block text-base font-medium;
17-
}
14+
label {
15+
&[for] {
16+
@apply cursor-pointer;
17+
}
18+
}
1819

19-
.small-label {
20-
@apply block text-sm font-medium;
21-
}
20+
.label {
21+
@apply pb-3 block text-base font-medium;
22+
}
2223

23-
.inline-label {
24-
@apply flex items-center gap-x-2;
25-
}
24+
.small-label {
25+
@apply block text-sm font-medium;
26+
}
2627

27-
.input,
28-
.textarea,
29-
.select,
30-
.checkbox,
31-
.radio {
32-
@apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
33-
}
28+
.inline-label {
29+
@apply flex items-center gap-x-2;
30+
}
3431

35-
.input,
36-
.textarea,
37-
.select {
38-
@apply block text-base w-full;
39-
}
32+
.input,
33+
.textarea,
34+
.select,
35+
.checkbox,
36+
.radio {
37+
@apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
38+
}
4039

41-
.textarea {
42-
@apply min-h-32;
43-
}
40+
.input,
41+
.textarea,
42+
.select {
43+
@apply block text-base w-full;
44+
}
4445

45-
.select,
46-
.checkbox,
47-
.radio {
48-
@apply cursor-pointer;
49-
}
46+
.textarea {
47+
@apply min-h-32;
48+
}
5049

51-
.checkbox,
52-
.radio {
53-
@apply size-5 text-brand-800;
54-
}
50+
.select,
51+
.checkbox,
52+
.radio {
53+
@apply cursor-pointer;
54+
}
5555

56-
.radio {
57-
@apply rounded-full;
56+
.checkbox,
57+
.radio {
58+
@apply size-5 text-brand-800;
59+
}
60+
61+
.radio {
62+
@apply rounded-full;
63+
}
5864
}

‎resources/css/typography.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@layer components {
2+
.heading {
3+
@apply text-neutral-900 font-semibold leading-none;
4+
}
5+
6+
.h1 {
7+
@apply text-4xl sm:text-5xl xl:text-6xl;
8+
}
9+
10+
.h2 {
11+
@apply text-3xl sm:text-4xl xl:text-5xl;
12+
}
13+
14+
.h3 {
15+
@apply text-xl sm:text-2xl xl:text-3xl;
16+
}
17+
18+
.h4 {
19+
@apply text-lg sm:text-xl xl:text-2xl;
20+
}
21+
22+
.h5 {
23+
@apply text-base sm:text-lg xl:text-xl;
24+
}
25+
26+
.h6 {
27+
@apply text-sm sm:text-base xl:text-lg;
28+
}
29+
}

0 commit comments

Comments
 (0)