Tailwind v4 (#1886)

* using tailwind v4

* Refactor modal components' styling for better responsiveness.

Adjusted class properties in Modal.vue and ModalCheckout.vue to improve positioning, alignment, and styling consistency. Simplified some redundant CSS class definitions and added inline styles where necessary for enhanced layout control.

* Refactor modal components' styling for better responsiveness.

Adjusted class properties in Modal.vue and ModalCheckout.vue to improve positioning, alignment, and styling consistency. Simplified some redundant CSS class definitions and added inline styles where necessary for enhanced layout control.

* Refactor Sass build script to improve import structure.

Replaced individual imports with namespace imports for better clarity. Updated function and export syntax to align with modern JavaScript standards. This refactor simplifies the code and enhances maintainability.

* Refactor Sass build script to improve import structure.

Replaced individual imports with namespace imports for better clarity. Updated function and export syntax to align with modern JavaScript standards. This refactor simplifies the code and enhances maintainability.

* Convert sass-build.ts to an ES module

Renamed the file to .mjs and updated it to follow ES module standards. This change ensures compatibility with modern JavaScript module systems.

* Update build script to use Gulp instead of custom SASS

Switches from a custom SASS build script to Gulp for improved maintainability and integration. Adjusts build configuration accordingly to streamline the development workflow.

* Update Sass build to use a JavaScript gulpfile

Replaced the TypeScript-based sass-build.ts with sass-build.mjs for the gulpfile. Updated the build script in package.json accordingly to ensure compatibility with the new JavaScript file.

* Update import syntax for gulp-sass and sass compatibility

Standardize the import statement for better compatibility with modern JavaScript module practices. This change ensures consistency and resolves potential import issues when using the `sass` compiler.

---------

Co-authored-by: kazuyoshi80 <[email protected]>
Co-authored-by: kazuyoshi kawakami <[email protected]>

Author: aggre

.preview/astro.config.mjs

@@ -1,13 +1,13 @@
 import { defineConfig } from 'astro/config'
 import react from '@astrojs/react'
 import vue from '@astrojs/vue'
-import tailwind from '@astrojs/tailwind'
 import svelte from '@astrojs/svelte'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-	server: {
-		port: 3000,
-	},
 	output: 'server',
-	integrations: [vue(), react(), svelte(), tailwind()],
+	integrations: [vue(), react(), svelte()],
+	vite: {
+		plugins: [tailwindcss()],
+	},
 })

.preview/src/pages/[...page].astro

@@ -1,4 +1,5 @@
 ---
+import '../styles/global.css'
 import {
 	pageFactory,
 	encode,

.preview/src/pages/admin/[...page].astro

@@ -1,4 +1,5 @@
 ---
+import '../../styles/global.css'
 import { Admin } from '../../../../src/layouts'
 import { adminFactory, encode } from '../../../../src/'
 import example from '../../../../example/index'

.preview/src/styles/global.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@config '../../../tailwind.config.js';

package.json

@@ -86,7 +86,7 @@
 		"preview:ui:tsc": "yarn build:ts --watch",
 		"preview:ui:rollup": "yarn build:rollup:ui -w",
 		"build": "yarn build:sass && yarn build:ts && yarn build:rollup:ui && yarn build:rollup",
-		"build:sass": "yarn gulp --gulpfile=\"sass-build.ts\"",
+		"build:sass": "yarn gulp --gulpfile=\"sass-build.mjs\"",
 		"build:ts": "tsc -p tsconfig.build.json",
 		"build:rollup": "rollup -c",
 		"build:rollup:ui": "rollup -c rollup.config.ui.mjs",
@@ -127,13 +127,13 @@
 		"@astrojs/lit": "4.3.0",
 		"@astrojs/react": "3.6.3",
 		"@astrojs/svelte": "6.0.2",
-		"@astrojs/tailwind": "5.1.2",
 		"@astrojs/vue": "4.5.3",
 		"@eslint/js": "^9.12.0",
 		"@rollup/plugin-commonjs": "28.0.1",
 		"@rollup/plugin-multi-entry": "6.0.1",
 		"@rollup/plugin-typescript": "12.1.1",
 		"@rollup/pluginutils": "5.1.3",
+		"@tailwindcss/vite": "^4.0.7",
 		"@types/dompurify": "^3.0.4",
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@types/eslint__js": "^8.42.3",
@@ -174,7 +174,7 @@
 		"sass": "1.81.1",
 		"svelte": "5.4.0",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "3.4.15",
+		"tailwindcss": "^4.0.7",
 		"typedoc": "^0.27.0",
 		"typescript": "5.6.3",
 		"typescript-eslint": "^8.8.0",
@@ -186,7 +186,6 @@
 		"@astrojs/lit": "^1.0.1 || ^2.0.0 || ^3.0.0 || ^4.0.0",
 		"@astrojs/react": "^1.2.2 || ^2.0.0 || ^3.0.0",
 		"@astrojs/svelte": "^1.0.2 || ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
-		"@astrojs/tailwind": "^2.1.3 || ^3.0.0 || ^4.0.0 || ^5.0.0",
 		"@astrojs/vue": "^1.2.2 || ^2.0.0 || ^3.0.0 || ^4.0.0",
 		"astro": "^3.0.0 || ^4.0.0",
 		"ethers": "^6.0.0",

sass-build.mjs

@@ -0,0 +1,20 @@
+import gulp from 'gulp'
+import gulpSass from 'gulp-sass/legacy.js'
+import * as sass from 'sass'
+
+const sassCompiler = gulpSass(sass)
+
+export function sassTaskDev() {
+	return gulp
+		.src(['src/styles/global.scss'], {
+			sourcemaps: true,
+		})
+		.pipe(
+			sassCompiler({
+				includePaths: ['node_modules'],
+			}).on('error', sassCompiler.logError)
+		)
+		.pipe(gulp.dest('./src/styles/build', { sourcemaps: '.' }))
+}
+
+export default gulp.series(sassTaskDev)

sass-build.ts

@@ -148,7 +148,7 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="relative w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow @container/clb_result_modal"
+		class="relative w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow"
 	>
 		<a
 			:href="props.base ?? '/'"
@@ -174,7 +174,8 @@ onMounted(async () => {
 			class="bg-color-navy relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
 		>
 			<div
-				class="w-h-screen bg-focus-lines origin-zero animate-spin-slow mask absolute inset-2/4 -translate-x-1/2 -translate-y-1/2 bg-center bg-no-repeat"
+				class="w-h-screen bg-focus-lines origin-zero animate-spin-slow mask absolute inset-2/4 bg-center bg-no-repeat"
+				style="transform: translate(50%, 50%)"
 			></div>
 			<h3 class="mb-1 text-white">
 				<span

src/ui/components/Checkout/ModalCheckout.vue

@@ -45,7 +45,7 @@ html:has(dialog[open]) {
 <template>
 	<dialog
 		ref="dialog"
-		class="fixed inset-0 m-auto box-border flex h-full max-h-full w-auto w-full max-w-full items-center justify-center overflow-y-auto bg-transparent backdrop:bg-black/60"
+		class="m-auto box-border flex h-full w-full items-center justify-center overflow-y-auto bg-transparent backdrop:bg-black/60"
 		:class="{ hidden: !isVisible }"
 	>
 		<Transition>