Skip to content

chore: upgrade to tailwind v4 #360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Mar 19, 2025
Merged

chore: upgrade to tailwind v4 #360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d750f66
migrate changed tailwindcss classes to v4
Sqrcz Feb 25, 2025
d74f3df
Merge branch 'main' into chore--upgrade-to-tailwind-v4
Sqrcz Mar 13, 2025
8813901
chore: upgrade to tailwindcss v4
Sqrcz Mar 17, 2025
db294c5
fix: package css exports
Sqrcz Mar 19, 2025
dc8670d
documentation update to align with new TailwindCSS configuration
Sqrcz Mar 19, 2025
01809f5
fix: local import
Sqrcz Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/.postcssrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

export default {
plugins: {
'tailwindcss': {},
'@tailwindcss/postcss': {},
'postcss-prefix-selector': {
prefix: ':not(:where(.vp-raw *))',
includeFiles: [/vp-doc\.css/],
Expand Down
11 changes: 11 additions & 0 deletions docs/.vitepress/theme/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/* .vitepress/theme/custom.css */
@layer theme, base, components, utilities;

@custom-variant dark (&:where(.dark, .dark *));

@import 'tailwindcss/theme.css' layer(theme) source(none);
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

Fix Syntax of @import Rule on Line 6.
Static analysis reports a syntax error in the statement:

@import 'tailwindcss/theme.css' layer(theme) source(none);

It appears that the parser expected a comma before the parenthesis. Please review the intended syntax—if this is an experimental feature or a Tailwind v4 update, confirm that the syntax is correct or adjust it to match the latest Tailwind and CSS specifications.

Action Required: Correct the @import Syntax on Line 6 of docs/.vitepress/theme/custom.css

The static analysis indicates that the current statement:

@import 'tailwindcss/theme.css' layer(theme) source(none);

is causing a syntax error—the parser appears to expect a comma to separate the descriptors. To align with the parser’s expectations (and assuming no alternative experimental behavior is intended), please update the code as follows:

@import 'tailwindcss/theme.css' layer(theme), source(none);

Ensure that this change is consistent with the latest Tailwind v4 (or experimental CSS features) specifications. If this syntax is intended to be experimental, double-check that your compiler or build tool fully supports it.

🧰 Tools
🪛 Biome (1.9.4)

[error] 6-6: expected , but instead found (

Remove (

(parse)

[error] 6-6: This @import is in the wrong position.

Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.

(lint/correctness/noInvalidPositionAtImportRule)

[error] 6-6: Don't use unknown media feature names.

Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.

(lint/correctness/noUnknownMediaFeatureName)

@import 'tailwindcss/utilities.css';
Comment on lines +6 to +7
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

Revisit the Positioning of @import Statements.
The static analysis hints indicate that both @import rules on lines 6–7 should be placed before other at-rules (apart from permissible ones like @charset and @layer). Consider moving these imports so they precede the custom at-rule declarations (e.g., the @custom-variant) to adhere to CSS spec requirements.

Action Required: Reorder @import Rules for CSS Spec Compliance
Based on the CSS specification and static analysis hints, please move the following imports from lines 6–7 in docs/.vitepress/theme/custom.css so that they appear before any non-permissible at-rules (for example, before any custom declarations like @custom-variant). Ensuring that all @import statements (aside from allowed ones like @charset or @layer) are declared at the top will help avoid CSS parsing issues.

@import 'tailwindcss/theme.css' layer(theme) source(none);
@import 'tailwindcss/utilities.css';

Please adjust their position accordingly and verify that the overall styling behaves as expected.

🧰 Tools
🪛 Biome (1.9.4)

[error] 6-6: expected , but instead found (

Remove (

(parse)

[error] 6-6: This @import is in the wrong position.

Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.

(lint/correctness/noInvalidPositionAtImportRule)

[error] 6-6: Don't use unknown media feature names.

Unexpected unknown media feature name.
You should use media feature names defined in the CSS Specifications.

(lint/correctness/noUnknownMediaFeatureName)

[error] 7-7: This @import is in the wrong position.

Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.

(lint/correctness/noInvalidPositionAtImportRule)


@source '../../../';

@import './clear.css';
5 changes: 5 additions & 0 deletions docs/.vitepress/theme/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import DefaultTheme from 'vitepress/theme'
import './custom.css'
import '../../../src/style.css'

export default DefaultTheme
15 changes: 0 additions & 15 deletions docs/.vitepress/theme/index.ts
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions docs/.vitepress/theme/tailwind.css
View file
Open in desktop

This file was deleted.

111 changes: 75 additions & 36 deletions docs/pages/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,104 @@
<script setup>
import { FwbAlert } from '../../src/index'
</script>
Comment on lines +1 to +3
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Inconsistent Import Source for FwbAlert

The <script setup> block currently imports FwbAlert from ../../src/index, whereas the later example (lines 101–103) imports it from flowbite-vue. For consistency and clarity in documentation, please update this import to use flowbite-vue.

- import { FwbAlert } from '../../src/index'
+ import { FwbAlert } from 'flowbite-vue'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<script setup>
import { FwbAlert } from '../../src/index'
</script>
<script setup>
import { FwbAlert } from 'flowbite-vue'
</script>


# Flowbite Vue - Quickstart

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

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.

## Require via NPM
<br>

Make sure that you have [Node.js](https://nodejs.org/en/) and [Tailwind CSS](https://tailwindcss.com/) installed.
::: info
Make sure that you have [Node.js](https://nodejs.org/en/) installed. Flowbite Vue requires version 18 or newer.
```bash
node -v
```
:::

### Install and configure TailwindCSS

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

```bash
npm i flowbite flowbite-vue
npm install -D tailwindcss @tailwindcss/vite
```

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

```javascript
module.exports = {
content: [
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
],
```js{3,8} [vite.config.js]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [
require('flowbite/plugin')
vue(),
tailwindcss(),
],
theme: {}
})
```
:::

3. Import Tailwind CSS
::: code-group
```css [src/style.css]
@import "tailwindcss";
```
:::

::: info
Remember to `@reference` your main style in `<style>` blocks if you want to use directives from Tailwind CSS.
:::

```vue{2}
<style scoped>
@reference "./style.css";

.custom-class {
@apply border rounded p-3;
}
</style>
```

3. Import Flowbite Vue styles:
```javascript
//in your `main.js` file
import '../node_modules/flowbite-vue/dist/index.css'
### Install and configure Flowbite Vue
1. Install **Flowbite** and **Flowbite Vue** as part of `dependencies`:

```bash
npm i flowbite flowbite-vue
```

2. Update `style.css` file

```css
/* or in your `app.css` file */
@import '/node_modules/flowbite-vue/dist/index.css';
/* import Flowbite Vue styles */
@import "flowbite-vue/index.css";

/* import Flowbite plugin */
@plugin "flowbite/plugin";

/* add Flowbite Vue directory using @source directive */
@source "../node_modules/flowbite-vue";
```

4. Now you can use `flowbite-vue` anywhere in your project and build awesome interfaces:
4. Now you can use **Flowbite Vue** anywhere in your project and build awesome interfaces:

<div class="vp-raw">
<fwb-alert type="success">
Success! You can now use Flowbite Vue in your Vue application 🎉
</fwb-alert>
</div>

```vue
<template>
<fwb-dropdown text="Click me" placement="top">
<fwb-list-group>
<fwb-list-group-item>Item #1</fwb-list-group-item>
<fwb-list-group-item>Item #2</fwb-list-group-item>
<fwb-list-group-item>Item #3</fwb-list-group-item>
</fwb-list-group>
</fwb-dropdown>
<fwb-alert type="success">
Success! You can now use Flowbite Vue in your Vue application 🎉
</fwb-alert>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
import { FwbAlert } from 'flowbite-vue'
</script>
```

> Make sure you have tailwind css imported. https://tailwindcss.com/docs/guides/vite

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4 changes: 4 additions & 0 deletions docs/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import { resolve } from 'path'

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
tailwindcss(),
],
resolve: {
alias: {
'@': resolve(__dirname, '../src'), // to resolve @ inside docs
Expand Down
16 changes: 0 additions & 16 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import pluginJs from '@eslint/js'
import stylistic from '@stylistic/eslint-plugin'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import importPlugin from 'eslint-plugin-import'
import tailwind from 'eslint-plugin-tailwindcss'
import unusedImports from 'eslint-plugin-unused-imports'
import pluginVue from 'eslint-plugin-vue'
import * as pluginVueScopedCss from 'eslint-plugin-vue-scoped-css'
Expand Down Expand Up @@ -33,20 +32,6 @@ const baseConfig = [
pluginJs.configs.recommended,
]

const tailwindConfig = [
...tailwind.configs['flat/recommended'],
{
settings: {
tailwindcss: {
whitelist: [
'vp-raw',
'^fwb\\-.*$', // Whitelist all classnames that start with "fwb-"
],
},
},
},
]

const vueConfig = [
...defineConfigWithVueTs(
pluginVue.configs['flat/recommended'],
Expand Down Expand Up @@ -179,7 +164,6 @@ const typeScriptConfig = [

export default [
...baseConfig,
...tailwindConfig,
...vueConfig,
...vueScopedCssConfig,
...standardConfig,
Expand Down
Loading
Loading