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 3 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.

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