Skip to content

Commit a298446

Browse files
Update vitepress to version 1.6.3 and enhance theme documentation
1 parent b463882 commit a298446

File tree

3 files changed

+1414
-607
lines changed

3 files changed

+1414
-607
lines changed

docs/get-started/powergrid-configuration.md

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,33 +50,63 @@ Currently, the following features are exclusive to the Tailwind theme.
5050
* [Filters outside](/table-features/filters.html#filter-position)
5151
:::
5252

53-
### 3. Import theme Assets
53+
### 3. Theme
5454

5555
Next, you must import the theme assets in the file `resources/js/app.js`.
5656

57-
### Tailwind
57+
::: code-group
5858

59-
If your project is configured for Tailwind, add the following code.
6059

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 *));
6368

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+
}
6588
```
6689

67-
### Bootstrap 5
90+
```css [Tailwind v3]
91+
/*resources/css/app.css*/
6892

69-
If your project is configured for Bootstrap 5, add the following code.
93+
@import './../../vendor/power-components/livewire-powergrid/dist/tailwind.css'
94+
```
7095

71-
```javascript{3}
72-
// resources/js/app.js
96+
```css [Bootstrap 5+]
97+
/*resources/css/app.css*/
7398

74-
import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'// [!code ++]
99+
@import './../../vendor/power-components/livewire-powergrid/dist/bootstrap5.css'
75100
```
76101

77-
### 4. Tailwind Configuration
102+
:::
103+
104+
105+
#### 4. Tailwind v3 Configuration
78106

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+
:::
80110

81111
#### Dark Mode
82112

0 commit comments

Comments
 (0)