Skip to content

Commit 6e8b366

Browse files
luanfreitasdevdansysanalyst
luanfreitasdev
and
dansysanalyst
authored
Tailwind 4 (#1873)
* Add auto inject assets * build assets * Fix bootstrap.css * Change default: false * replace laravel-mix to vite * fix phpstan always false error * use Invokable controller & custom response * wip * wip * Add tailwin.config.js * wip * wip * wip * wip * fix cypress config --------- Co-authored-by: Dan <[email protected]>
1 parent 673b586 commit 6e8b366

22 files changed

+240
-105
lines changed

‎.github/workflows/test-build.yml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Test Build
2+
3+
on:
4+
push:
5+
branches:
6+
- "**"
7+
pull_request:
8+
types: [ ready_for_review, synchronize, opened ]
9+
10+
jobs:
11+
test-build:
12+
runs-on: ${{ matrix.os }}
13+
strategy:
14+
fail-fast: false
15+
matrix:
16+
os: [ubuntu-latest]
17+
steps:
18+
- name: Checkout Repository
19+
uses: actions/checkout@v4
20+
21+
- name: Setup Node.js
22+
uses: actions/setup-node@v4
23+
with:
24+
node-version: '22.x'
25+
26+
- name: Install NPM Dependencies
27+
run: npm install
28+
29+
- name: Build
30+
run: npm run build
31+
32+
- name: Build Tailwind 4
33+
run: npm run build:tailwind

‎composer.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
],
2020
"require": {
2121
"php": "^8.2",
22-
"livewire/livewire": "^3.5.0",
22+
"livewire/livewire": "^3.6.0",
2323
"laravel/prompts": "*"
2424
},
2525
"require-dev": {

‎dist/.vite/manifest.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"resources/css/bootstrap5.css": {
3+
"file": "bootstrap5.css",
4+
"src": "resources/css/bootstrap5.css",
5+
"isEntry": true
6+
},
7+
"resources/css/tailwind.css": {
8+
"file": "tailwind.css",
9+
"src": "resources/css/tailwind.css",
10+
"isEntry": true
11+
},
12+
"resources/js/powergrid.js": {
13+
"file": "powergrid.js",
14+
"name": "powergrid",
15+
"src": "resources/js/powergrid.js",
16+
"isEntry": true
17+
}
18+
}

‎dist/bootstrap5.css

+1-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mix-manifest.json

-5
This file was deleted.

‎dist/powergrid.js

+23-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/tailwind.css

+1-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+13-12
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
"test": "tests"
88
},
99
"scripts": {
10-
"dev": "mix watch",
11-
"build": "mix --production",
10+
"build": "vite build",
11+
"build:tailwind": "npx @tailwindcss/cli -i ./resources/css/tailwind4.css -o ./dist/tailwind4.css --minify",
12+
"dev": "vite build --watch",
1213
"blade-formatter": "blade-formatter --write resources/**/*.blade.php"
1314
},
1415
"repository": {
@@ -17,24 +18,24 @@
1718
},
1819
"author": "",
1920
"license": "ISC",
21+
"type": "module",
2022
"bugs": {
2123
"url": "https://github.com/Power-Components/livewire-powergrid/issues"
2224
},
2325
"homepage": "https://github.com/Power-Components/livewire-powergrid#readme",
24-
"dependencies": {
25-
"alpinejs": "^3.14.1",
26-
"laravel-mix": "^6.0.49",
27-
"tom-select": "^2.3.1"
28-
},
2926
"devDependencies": {
27+
"@tailwindcss/forms": "^0.5.10",
28+
"@tailwindcss/vite": "^4.0.12",
29+
"alpinejs": "^3.14.7",
3030
"autoprefixer": "^10.4.20",
3131
"blade-formatter": "^1.41.1",
32-
"cypress": "^13.13.2",
32+
"cypress": "^13.16.1",
3333
"flatpickr": "^4.6.13",
34-
"postcss": "^8.4.41",
3534
"resolve-url-loader": "^5.0.0",
36-
"sass": "^1.77.8",
37-
"sass-loader": "^14.1.1",
38-
"tailwindcss": "^3.4.7"
35+
"sass": "^1.82.0",
36+
"sass-loader": "^16.0.4",
37+
"tailwindcss": "^4.0.12",
38+
"tom-select": "^2.4.1",
39+
"vite": "^6.0.3"
3940
}
4041
}

‎phpstan.neon

-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ parameters:
3030

3131
excludePaths:
3232
- './src/Components/Exports/OpenSpout/*'
33-
- './src/Components/Actions/Macros.php'
34-
- './src/Helpers/Actions.php'
3533
- './src/Livewire/PerformanceCard.php'
3634
- './src/Recorders/PowerGridPerformanceRecorder.php'
3735
- './src/Themes/Theme.php'

‎postcss.config.js

-6
This file was deleted.

‎resources/css/bootstrap.css renamed to ‎resources/css/bootstrap5.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import "base.css";
2-
@import "editable.css";
1+
@import "./base.css";
2+
@import "./editable.css";
33

44
.table .checkbox-column {
55
width: 50px !important;

‎resources/css/tailwind.css

+3-36
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/tailwind4.css

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@import "tailwindcss";
2+
@import "./base.css";
3+
@import "./editable.css";
4+
5+
@custom-variant dark (&:where(.dark, .dark *));
6+
7+
@source '../src/Themes/Tailwind.php';
8+
@source '../resources/views/**/*.php';
9+
@source '../resources/js/**/*.js';
10+
11+
@theme {
12+
--color-pg-primary-50: oklch(0.985 0 0);
13+
--color-pg-primary-100: oklch(0.97 0 0);
14+
--color-pg-primary-200: oklch(0.922 0 0);
15+
--color-pg-primary-300: oklch(0.87 0 0);
16+
--color-pg-primary-400: oklch(0.708 0 0);
17+
--color-pg-primary-500: oklch(0.556 0 0);
18+
--color-pg-primary-600: oklch(0.439 0 0);
19+
--color-pg-primary-700: oklch(0.371 0 0);
20+
--color-pg-primary-800: oklch(0.269 0 0);
21+
--color-pg-primary-900: oklch(0.205 0 0);
22+
--color-pg-primary-950: oklch(0.145 0 0);
23+
24+
--color-primary-50: oklch(0.984 0.003 247.858);
25+
--color-primary-100: oklch(0.968 0.007 247.896);
26+
--color-primary-200: oklch(0.929 0.013 255.508);
27+
--color-primary-300: oklch(0.869 0.022 252.894);
28+
--color-primary-400: oklch(0.704 0.04 256.788);
29+
--color-primary-500: oklch(0.554 0.046 257.417);
30+
--color-primary-600: oklch(0.446 0.043 257.281);
31+
--color-primary-700: oklch(0.372 0.044 257.287);
32+
--color-primary-800: oklch(0.279 0.041 260.031);
33+
--color-primary-900: oklch(0.208 0.042 265.755);
34+
--color-primary-950: oklch(0.129 0.042 264.695);
35+
36+
--color-pg-secondary-50: oklch(0.97 0.014 254.604);
37+
--color-pg-secondary-100: oklch(0.932 0.032 255.585);
38+
--color-pg-secondary-200: oklch(0.882 0.059 254.128);
39+
--color-pg-secondary-300: oklch(0.809 0.105 251.813);
40+
--color-pg-secondary-400: oklch(0.707 0.165 254.624);
41+
--color-pg-secondary-500: oklch(0.623 0.214 259.815);
42+
--color-pg-secondary-600: oklch(0.546 0.245 262.881);
43+
--color-pg-secondary-700: oklch(0.488 0.243 264.376);
44+
--color-pg-secondary-800: oklch(0.424 0.199 265.638);
45+
--color-pg-secondary-900: oklch(0.379 0.146 265.522);
46+
--color-pg-secondary-950: oklch(0.282 0.091 267.935);
47+
}
48+
49+
@layer base {
50+
*,
51+
::after,
52+
::before,
53+
::backdrop,
54+
::file-selector-button {
55+
border-color: var(--color-pg-primary-200, currentColor);
56+
}
57+
}
58+
59+
.page-link {
60+
@apply block bg-white text-pg-secondary-800 border-r border-gray-200 outline-none py-2 w-12 text-sm text-center
61+
}
62+
63+
.page-link:last-child {
64+
@apply border-0
65+
}
66+
67+
.page-link:hover {
68+
@apply bg-pg-secondary-700 text-white border-pg-secondary-700
69+
}
70+
71+
.page-item.active .page-link {
72+
@apply bg-pg-secondary-700 text-white border-pg-secondary-700
73+
}
74+
75+
.page-item.disabled .page-link {
76+
@apply bg-white text-gray-300 border-gray-200
77+
}
78+
79+
.pg-btn-white {
80+
@apply outline-none inline-flex justify-center items-center focus:ring-1 focus:ring-offset-1 bg-white
81+
hover:shadow-sm disabled:opacity-80 disabled:cursor-not-allowed rounded-lg gap-x-2 text-sm px-3 py-2 border border-pg-primary-300
82+
text-pg-primary-500 hover:bg-pg-primary-100 ring-pg-primary-200
83+
}
84+
85+
.pg-filter-container {
86+
@apply py-3;
87+
}
88+
89+
.pg-enabled-filters-base {
90+
@apply flex items-center gap-2 my-3 md:mt-0 flex-wrap
91+
}

0 commit comments

Comments
 (0)