@@ -50,33 +50,63 @@ Currently, the following features are exclusive to the Tailwind theme.
50
50
* [ Filters outside] ( /table-features/filters.html#filter-position )
51
51
:::
52
52
53
- ### 3. Import theme Assets
53
+ ### 3. Theme
54
54
55
55
Next, you must import the theme assets in the file ` resources/js/app.js ` .
56
56
57
- ### Tailwind
57
+ ::: code-group
58
58
59
- If your project is configured for Tailwind, add the following code.
60
59
61
- ``` javascript{3}
62
- // resources/js/app.js
60
+ ``` css [Tailwind v4]
61
+ /* resources/css/app.css*/
62
+
63
+ @import " tailwindcss" ;
64
+ @import ' ../../vendor/power-components/livewire-powergrid/resources/css/tailwind4.css' ;
65
+
66
+ /* * enable dark mode */
67
+ @custom-variant dark (&:where(.dark, .dark *));
63
68
64
- import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'// [!code ++]
69
+ @source '../../app/Livewire/*Table.php';
70
+ @source '../../app/Livewire/**/*Table.php';
71
+ @source '../../vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php';
72
+ @source '../../vendor/power-components/livewire-powergrid/resources/views/**/*.php';
73
+
74
+ /* Custom theme */
75
+ @theme {
76
+ --color-pg-primary-50: oklch(0.985 0 0);
77
+ --color-pg-primary-100: oklch(0.97 0 0);
78
+ --color-pg-primary-200: oklch(0.922 0 0);
79
+ --color-pg-primary-300: oklch(0.87 0 0);
80
+ --color-pg-primary-400: oklch(0.708 0 0);
81
+ --color-pg-primary-500: oklch(0.556 0 0);
82
+ --color-pg-primary-600: oklch(0.439 0 0);
83
+ --color-pg-primary-700: oklch(0.371 0 0);
84
+ --color-pg-primary-800: oklch(0.269 0 0);
85
+ --color-pg-primary-900: oklch(0.205 0 0);
86
+ --color-pg-primary-950: oklch(0.145 0 0);
87
+ }
65
88
```
66
89
67
- ### Bootstrap 5
90
+ ``` css [Tailwind v3]
91
+ /* resources/css/app.css*/
68
92
69
- If your project is configured for Bootstrap 5, add the following code.
93
+ @import ' ./../../vendor/power-components/livewire-powergrid/dist/tailwind.css'
94
+ ```
70
95
71
- ``` javascript{3}
72
- // resources/js /app.js
96
+ ```css [Bootstrap 5+]
97
+ /* resources/css /app.css */
73
98
74
- import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'// [!code ++]
99
+ @ import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'
75
100
```
76
101
77
- ### 4. Tailwind Configuration
102
+ :::
103
+
104
+
105
+ #### 4. Tailwind v3 Configuration
78
106
79
- If you are using Tailwind, you may configure the options below.
107
+ ::: tip
108
+ If you are using Tailwind v3, you may configure the options below.
109
+ :::
80
110
81
111
#### Dark Mode
82
112
0 commit comments