chore: upgrade to tailwind v4 #360
There are no files selected for viewing
| 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); | ||
| @import 'tailwindcss/utilities.css'; | ||
|
Comment on lines
+6
to
+7
There was a problem hiding this comment. 💡 Verification agent ❓ Verification inconclusiveRevisit the Positioning of @import Statements. Action Required: Reorder @import Rules for CSS Spec Compliance Please adjust their position accordingly and verify that the overall styling behaves as expected. 🧰 Tools🪛 Biome (1.9.4)[error] 6-6: expected 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. (lint/correctness/noInvalidPositionAtImportRule) [error] 6-6: Don't use unknown media feature names. Unexpected unknown media feature name. (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. (lint/correctness/noInvalidPositionAtImportRule) |
||
|
|
||
| @source '../../../'; | ||
|
|
||
| @import './clear.css'; | ||
| 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 |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,104 @@ | ||
| <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. | ||
|
|
||
| <br> | ||
|
|
||
| ::: 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 [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) as part of `devDependencies`: | ||
|
|
||
| ```bash | ||
| npm install -D tailwindcss @tailwindcss/vite | ||
| ``` | ||
|
|
||
| 2. Configure the Vite plugin: | ||
| ::: code-group | ||
|
|
||
| ```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: [ | ||
| vue(), | ||
| tailwindcss(), | ||
| ], | ||
| }) | ||
| ``` | ||
| ::: | ||
|
|
||
| 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> | ||
| ``` | ||
|
|
||
| ### 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 | ||
| /* 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: | ||
|
|
||
| <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-alert type="success"> | ||
| Success! You can now use Flowbite Vue in your Vue application 🎉 | ||
| </fwb-alert> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { FwbAlert } from 'flowbite-vue' | ||
| </script> | ||
| ``` | ||
There was a problem hiding this comment.
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:
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:
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:
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)