Skip to content

Commit 93165ed

Browse files
SqrczSqrcz
authored
Merge pull request #360 from Sqrcz/chore--upgrade-to-tailwind-v4
chore: upgrade to tailwind v4
2 parents b23c6e7 + 01809f5 commit 93165ed

File tree

18 files changed

+1773
-1333
lines changed

18 files changed

+1773
-1333
lines changed

‎docs/.postcssrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
export default {
77
plugins: {
8-
'tailwindcss': {},
8+
'@tailwindcss/postcss': {},
99
'postcss-prefix-selector': {
1010
prefix: ':not(:where(.vp-raw *))',
1111
includeFiles: [/vp-doc\.css/],

‎docs/.vitepress/theme/custom.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* .vitepress/theme/custom.css */
2+
@layer theme, base, components, utilities;
3+
4+
@custom-variant dark (&:where(.dark, .dark *));
5+
6+
@import 'tailwindcss/theme.css' layer(theme) source(none);
7+
@import 'tailwindcss/utilities.css';
8+
9+
@source '../../../';
10+
11+
@import './clear.css';

‎docs/.vitepress/theme/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import './custom.css'
3+
import '../../../src/style.css'
4+
5+
export default DefaultTheme

‎docs/.vitepress/theme/index.ts‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎docs/.vitepress/theme/tailwind.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎docs/pages/getting-started.md‎

Lines changed: 75 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,104 @@
1+
<script setup>
2+
import { FwbAlert } from '../../src/index'
3+
</script>
4+
15
# Flowbite Vue - Quickstart
26

37
Get started with Flowbite by including it into your project using NPM
48

59
Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.
610

7-
## Require via NPM
11+
<br>
812

9-
Make sure that you have [Node.js](https://nodejs.org/en/) and [Tailwind CSS](https://tailwindcss.com/) installed.
13+
::: info
14+
Make sure that you have [Node.js](https://nodejs.org/en/) installed. Flowbite Vue requires version 18 or newer.
15+
```bash
16+
node -v
17+
```
18+
:::
19+
20+
### Install and configure TailwindCSS
1021

11-
1. Install `flowbite` and `flowbite-vue` as a dependency using NPM by running the following command:
22+
1. Install [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) as part of `devDependencies`:
1223

1324
```bash
14-
npm i flowbite flowbite-vue
25+
npm install -D tailwindcss @tailwindcss/vite
1526
```
1627

17-
2. Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:
28+
2. Configure the Vite plugin:
29+
::: code-group
1830

19-
```javascript
20-
module.exports = {
21-
content: [
22-
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
23-
'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
24-
],
31+
```js{3,8} [vite.config.js]
32+
import { defineConfig } from 'vite'
33+
import vue from '@vitejs/plugin-vue'
34+
import tailwindcss from '@tailwindcss/vite'
35+
36+
export default defineConfig({
2537
plugins: [
26-
require('flowbite/plugin')
38+
vue(),
39+
tailwindcss(),
2740
],
28-
theme: {}
41+
})
42+
```
43+
:::
44+
45+
3. Import Tailwind CSS
46+
::: code-group
47+
```css [src/style.css]
48+
@import "tailwindcss";
49+
```
50+
:::
51+
52+
::: info
53+
Remember to `@reference` your main style in `<style>` blocks if you want to use directives from Tailwind CSS.
54+
:::
55+
56+
```vue{2}
57+
<style scoped>
58+
@reference "./style.css";
59+
60+
.custom-class {
61+
@apply border rounded p-3;
2962
}
63+
</style>
3064
```
3165

32-
3. Import Flowbite Vue styles:
33-
```javascript
34-
//in your `main.js` file
35-
import '../node_modules/flowbite-vue/dist/index.css'
66+
### Install and configure Flowbite Vue
67+
1. Install **Flowbite** and **Flowbite Vue** as part of `dependencies`:
68+
69+
```bash
70+
npm i flowbite flowbite-vue
3671
```
72+
73+
2. Update `style.css` file
74+
3775
```css
38-
/* or in your `app.css` file */
39-
@import '/node_modules/flowbite-vue/dist/index.css';
76+
/* import Flowbite Vue styles */
77+
@import "flowbite-vue/index.css";
78+
79+
/* import Flowbite plugin */
80+
@plugin "flowbite/plugin";
81+
82+
/* add Flowbite Vue directory using @source directive */
83+
@source "../node_modules/flowbite-vue";
4084
```
4185

42-
4. Now you can use `flowbite-vue` anywhere in your project and build awesome interfaces:
86+
4. Now you can use **Flowbite Vue** anywhere in your project and build awesome interfaces:
87+
88+
<div class="vp-raw">
89+
<fwb-alert type="success">
90+
Success! You can now use Flowbite Vue in your Vue application 🎉
91+
</fwb-alert>
92+
</div>
93+
4394
```vue
4495
<template>
45-
<fwb-dropdown text="Click me" placement="top">
46-
<fwb-list-group>
47-
<fwb-list-group-item>Item #1</fwb-list-group-item>
48-
<fwb-list-group-item>Item #2</fwb-list-group-item>
49-
<fwb-list-group-item>Item #3</fwb-list-group-item>
50-
</fwb-list-group>
51-
</fwb-dropdown>
96+
<fwb-alert type="success">
97+
Success! You can now use Flowbite Vue in your Vue application 🎉
98+
</fwb-alert>
5299
</template>
53100
54101
<script setup>
55-
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
102+
import { FwbAlert } from 'flowbite-vue'
56103
</script>
57104
```
58-
59-
> Make sure you have tailwind css imported. https://tailwindcss.com/docs/guides/vite
60-
61-
```
62-
@tailwind base;
63-
@tailwind components;
64-
@tailwind utilities;
65-
```

‎docs/vite.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { resolve } from 'path'
22

3+
import tailwindcss from '@tailwindcss/vite'
34
import { defineConfig } from 'vite'
45

56
// https://vitejs.dev/config/
67
export default defineConfig({
8+
plugins: [
9+
tailwindcss(),
10+
],
711
resolve: {
812
alias: {
913
'@': resolve(__dirname, '../src'), // to resolve @ inside docs

‎eslint.config.js‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import pluginJs from '@eslint/js'
22
import stylistic from '@stylistic/eslint-plugin'
33
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
44
import importPlugin from 'eslint-plugin-import'
5-
import tailwind from 'eslint-plugin-tailwindcss'
65
import unusedImports from 'eslint-plugin-unused-imports'
76
import pluginVue from 'eslint-plugin-vue'
87
import * as pluginVueScopedCss from 'eslint-plugin-vue-scoped-css'
@@ -33,20 +32,6 @@ const baseConfig = [
3332
pluginJs.configs.recommended,
3433
]
3534

36-
const tailwindConfig = [
37-
...tailwind.configs['flat/recommended'],
38-
{
39-
settings: {
40-
tailwindcss: {
41-
whitelist: [
42-
'vp-raw',
43-
'^fwb\\-.*$', // Whitelist all classnames that start with "fwb-"
44-
],
45-
},
46-
},
47-
},
48-
]
49-
5035
const vueConfig = [
5136
...defineConfigWithVueTs(
5237
pluginVue.configs['flat/recommended'],
@@ -179,7 +164,6 @@ const typeScriptConfig = [
179164

180165
export default [
181166
...baseConfig,
182-
...tailwindConfig,
183167
...vueConfig,
184168
...vueScopedCssConfig,
185169
...standardConfig,

0 commit comments

Comments
 (0)