diff --git a/templates/angular-example/src/styles.css b/templates/angular-example/src/styles.css index 72b5314b..2537e07a 100644 --- a/templates/angular-example/src/styles.css +++ b/templates/angular-example/src/styles.css @@ -1,5 +1,4 @@ @import 'tailwindcss'; -@config "../tailwind.config.js"; @font-face { font-family: 'JetBrains Mono'; @@ -14,3 +13,42 @@ font-weight: 800; src: url('/assets/fonts/jetbrainsmono-bold.woff2') format('woff2'); } + +@theme { + --font-display: 'JetBrains Mono', sans-serif; + + --color-*: initial; + --color-inherit: inherit; + --color-transparent: transparent; + --color-current: currentColor; + --color-black: rgb(0 0 0); + --color-white: rgb(255 255 255); + + --color-lavender-blue-50: #f2f3ff; + --color-lavender-blue-100: #e4e7ff; + --color-lavender-blue-200: #c9cfff; + --color-lavender-blue-300: #aeb8ff; + --color-lavender-blue-400: #93a0ff; + --color-lavender-blue-500: #7888ff; + --color-lavender-blue-600: #606dcc; + --color-lavender-blue-700: #485299; + --color-lavender-blue-800: #303666; + --color-lavender-blue-900: #181b33; +} + +@theme { + --animate-fade: fadeIn 0.25s ease-in-out; + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } +} + +html { + font-family: var(--font-display); +} diff --git a/templates/angular-example/tailwind.config.js b/templates/angular-example/tailwind.config.js deleted file mode 100644 index c8aa826f..00000000 --- a/templates/angular-example/tailwind.config.js +++ /dev/null @@ -1,42 +0,0 @@ -import {fontFamily} from 'tailwindcss/defaultTheme'; - -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ['./src/**/*.{html,ts}'], - theme: { - fontFamily: { - sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans] - }, - extend: { - animation: { - fade: 'fadeIn .25s ease-in-out' - }, - - keyframes: { - fadeIn: { - from: {opacity: '0'}, - to: {opacity: '1'} - } - } - }, - colors: { - inherit: 'inherit', - transparent: 'transparent', - current: 'currentColor', - black: 'rgb(0 0 0)', - white: 'rgb(255 255 255)', - ['lavender-blue']: { - 50: '#f2f3ff', - 100: '#e4e7ff', - 200: '#c9cfff', - 300: '#aeb8ff', - 400: '#93a0ff', - 500: '#7888ff', - 600: '#606dcc', - 700: '#485299', - 800: '#303666', - 900: '#181b33' - } - } - } -}; diff --git a/templates/angular-starter/src/styles.css b/templates/angular-starter/src/styles.css index 72b5314b..e8eeceb3 100644 --- a/templates/angular-starter/src/styles.css +++ b/templates/angular-starter/src/styles.css @@ -1,5 +1,4 @@ @import 'tailwindcss'; -@config "../tailwind.config.js"; @font-face { font-family: 'JetBrains Mono'; @@ -14,3 +13,29 @@ font-weight: 800; src: url('/assets/fonts/jetbrainsmono-bold.woff2') format('woff2'); } + +@theme { + --font-display: 'JetBrains Mono', sans-serif; + + --color-*: initial; + --color-inherit: inherit; + --color-transparent: transparent; + --color-current: currentColor; + --color-black: rgb(0 0 0); + --color-white: rgb(255 255 255); + + --color-lavender-blue-50: #f2f3ff; + --color-lavender-blue-100: #e4e7ff; + --color-lavender-blue-200: #c9cfff; + --color-lavender-blue-300: #aeb8ff; + --color-lavender-blue-400: #93a0ff; + --color-lavender-blue-500: #7888ff; + --color-lavender-blue-600: #606dcc; + --color-lavender-blue-700: #485299; + --color-lavender-blue-800: #303666; + --color-lavender-blue-900: #181b33; +} + +html { + font-family: var(--font-display); +} diff --git a/templates/angular-starter/tailwind.config.js b/templates/angular-starter/tailwind.config.js deleted file mode 100644 index a1b69bf4..00000000 --- a/templates/angular-starter/tailwind.config.js +++ /dev/null @@ -1,30 +0,0 @@ -import {fontFamily} from 'tailwindcss/defaultTheme'; - -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ['./src/**/*.{html,ts}'], - theme: { - fontFamily: { - sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans] - }, - colors: { - inherit: 'inherit', - transparent: 'transparent', - current: 'currentColor', - black: 'rgb(0 0 0)', - white: 'rgb(255 255 255)', - ['lavender-blue']: { - 50: '#f2f3ff', - 100: '#e4e7ff', - 200: '#c9cfff', - 300: '#aeb8ff', - 400: '#93a0ff', - 500: '#7888ff', - 600: '#606dcc', - 700: '#485299', - 800: '#303666', - 900: '#181b33' - } - } - } -}; diff --git a/templates/astro-starter/package.json b/templates/astro-starter/package.json index c2dc834a..c467d78b 100644 --- a/templates/astro-starter/package.json +++ b/templates/astro-starter/package.json @@ -17,7 +17,7 @@ "@astrojs/sitemap": "^3.2.1", "@junobuild/config": "^0.1.0", "@junobuild/vite-plugin": "^0.0.19", - "@tailwindcss/vite": "^4.0.0", + "@tailwindcss/vite": "^4.0.6", "astro": "^5.0.3", "prettier": "^3.4.2", "prettier-plugin-astro": "^0.14.1", diff --git a/templates/astro-starter/src/styles/global.css b/templates/astro-starter/src/styles/global.css index 96854808..5a1e3501 100644 --- a/templates/astro-starter/src/styles/global.css +++ b/templates/astro-starter/src/styles/global.css @@ -1,5 +1,4 @@ @import "tailwindcss"; -@config "../../tailwind.config.mjs"; @font-face { font-family: "JetBrains Mono"; @@ -14,3 +13,29 @@ font-weight: 800; src: url("./fonts/jetbrainsmono-bold.woff2") format("woff2"); } + +@theme { + --font-display: 'JetBrains Mono', sans-serif; + + --color-*: initial; + --color-inherit: inherit; + --color-transparent: transparent; + --color-current: currentColor; + --color-black: rgb(0 0 0); + --color-white: rgb(255 255 255); + + --color-lavender-blue-50: #f2f3ff; + --color-lavender-blue-100: #e4e7ff; + --color-lavender-blue-200: #c9cfff; + --color-lavender-blue-300: #aeb8ff; + --color-lavender-blue-400: #93a0ff; + --color-lavender-blue-500: #7888ff; + --color-lavender-blue-600: #606dcc; + --color-lavender-blue-700: #485299; + --color-lavender-blue-800: #303666; + --color-lavender-blue-900: #181b33; +} + +html { + font-family: var(--font-display); +} diff --git a/templates/astro-starter/tailwind.config.mjs b/templates/astro-starter/tailwind.config.mjs deleted file mode 100644 index 963ad111..00000000 --- a/templates/astro-starter/tailwind.config.mjs +++ /dev/null @@ -1,30 +0,0 @@ -import { fontFamily } from "tailwindcss/defaultTheme"; - -/** @type {import('tailwindcss').Config} */ -export default { - content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], - theme: { - fontFamily: { - sans: ["JetBrains Mono", "sans-serif", ...fontFamily.sans], - }, - colors: { - inherit: "inherit", - transparent: "transparent", - current: "currentColor", - black: "rgb(0 0 0)", - white: "rgb(255 255 255)", - ["lavender-blue"]: { - 50: "#f2f3ff", - 100: "#e4e7ff", - 200: "#c9cfff", - 300: "#aeb8ff", - 400: "#93a0ff", - 500: "#7888ff", - 600: "#606dcc", - 700: "#485299", - 800: "#303666", - 900: "#181b33", - }, - }, - }, -}; diff --git a/templates/nextjs-example/src/app/globals.css b/templates/nextjs-example/src/app/globals.css index 2a1b9381..51261358 100644 --- a/templates/nextjs-example/src/app/globals.css +++ b/templates/nextjs-example/src/app/globals.css @@ -1,5 +1,4 @@ @import 'tailwindcss'; -@config '../../tailwind.config.ts'; @font-face { font-family: 'JetBrains Mono'; @@ -14,3 +13,42 @@ font-weight: 800; src: url('/fonts/jetbrainsmono-bold.woff2') format('woff2'); } + +@theme { + --font-display: 'JetBrains Mono', sans-serif; + + --color-*: initial; + --color-inherit: inherit; + --color-transparent: transparent; + --color-current: currentColor; + --color-black: rgb(0 0 0); + --color-white: rgb(255 255 255); + + --color-lavender-blue-50: #f2f3ff; + --color-lavender-blue-100: #e4e7ff; + --color-lavender-blue-200: #c9cfff; + --color-lavender-blue-300: #aeb8ff; + --color-lavender-blue-400: #93a0ff; + --color-lavender-blue-500: #7888ff; + --color-lavender-blue-600: #606dcc; + --color-lavender-blue-700: #485299; + --color-lavender-blue-800: #303666; + --color-lavender-blue-900: #181b33; +} + +@theme { + --animate-fade: fadeIn 0.25s ease-in-out; + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } +} + +html { + font-family: var(--font-display); +} diff --git a/templates/nextjs-example/tailwind.config.ts b/templates/nextjs-example/tailwind.config.ts deleted file mode 100644 index 51208dfa..00000000 --- a/templates/nextjs-example/tailwind.config.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type {Config} from 'tailwindcss'; - -const config: Config = { - content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}' - ], - theme: { - extend: { - animation: { - fade: 'fadeIn .25s ease-in-out' - }, - keyframes: { - fadeIn: { - from: {opacity: '0'}, - to: {opacity: '1'} - } - } - }, - colors: { - inherit: 'inherit', - transparent: 'transparent', - current: 'currentColor', - black: 'rgb(0 0 0)', - white: 'rgb(255 255 255)', - ['lavender-blue']: { - 50: '#f2f3ff', - 100: '#e4e7ff', - 200: '#c9cfff', - 300: '#aeb8ff', - 400: '#93a0ff', - 500: '#7888ff', - 600: '#606dcc', - 700: '#485299', - 800: '#303666', - 900: '#181b33' - } - } - } -}; -export default config; diff --git a/templates/nextjs-starter/src/app/globals.css b/templates/nextjs-starter/src/app/globals.css index d3dffaa8..25945bed 100644 --- a/templates/nextjs-starter/src/app/globals.css +++ b/templates/nextjs-starter/src/app/globals.css @@ -1,5 +1,4 @@ @import 'tailwindcss'; -@config "../../tailwind.config.ts"; @font-face { font-family: 'JetBrains Mono'; @@ -14,3 +13,29 @@ font-weight: 800; src: url('/fonts/jetbrainsmono-bold.woff2') format('woff2'); } + +@theme { + --font-display: 'JetBrains Mono', sans-serif; + + --color-*: initial; + --color-inherit: inherit; + --color-transparent: transparent; + --color-current: currentColor; + --color-black: rgb(0 0 0); + --color-white: rgb(255 255 255); + + --color-lavender-blue-50: #f2f3ff; + --color-lavender-blue-100: #e4e7ff; + --color-lavender-blue-200: #c9cfff; + --color-lavender-blue-300: #aeb8ff; + --color-lavender-blue-400: #93a0ff; + --color-lavender-blue-500: #7888ff; + --color-lavender-blue-600: #606dcc; + --color-lavender-blue-700: #485299; + --color-lavender-blue-800: #303666; + --color-lavender-blue-900: #181b33; +} + +html { + font-family: var(--font-display); +} diff --git a/templates/nextjs-starter/tailwind.config.ts b/templates/nextjs-starter/tailwind.config.ts deleted file mode 100644 index c78eef88..00000000 --- a/templates/nextjs-starter/tailwind.config.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type {Config} from 'tailwindcss'; - -const config: Config = { - content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}' - ], - theme: { - colors: { - inherit: 'inherit', - transparent: 'transparent', - current: 'currentColor', - black: 'rgb(0 0 0)', - white: 'rgb(255 255 255)', - ['lavender-blue']: { - 50: '#f2f3ff', - 100: '#e4e7ff', - 200: '#c9cfff', - 300: '#aeb8ff', - 400: '#93a0ff', - 500: '#7888ff', - 600: '#606dcc', - 700: '#485299', - 800: '#303666', - 900: '#181b33' - } - } - } -}; -export default config; diff --git a/templates/react-example/package.json b/templates/react-example/package.json index af2926e6..267df3c8 100644 --- a/templates/react-example/package.json +++ b/templates/react-example/package.json @@ -23,6 +23,7 @@ "@junobuild/config": "^0.1.0", "@junobuild/vite-plugin": "^0.0.19", "@tailwindcss/postcss": "^4.0.0", + "@tailwindcss/vite": "^4.0.6", "@types/react": "19.0.0", "@types/react-dom": "19.0.0", "@vitejs/plugin-react": "^4.3.4", diff --git a/templates/react-example/postcss.config.js b/templates/react-example/postcss.config.js deleted file mode 100644 index 50a4f5b9..00000000 --- a/templates/react-example/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - plugins: { - '@tailwindcss/postcss': {} - } -}; diff --git a/templates/react-example/src/index.css b/templates/react-example/src/index.css index 43131d11..3796215d 100644 --- a/templates/react-example/src/index.css +++ b/templates/react-example/src/index.css @@ -1,5 +1,4 @@ @import 'tailwindcss'; -@config '../tailwind.config.js'; @font-face { font-family: 'JetBrains Mono'; @@ -14,3 +13,42 @@ font-weight: 800; src: url('./fonts/jetbrainsmono-bold.woff2') format('woff2'); } + +@theme { + --font-display: 'JetBrains Mono', sans-serif; + + --color-*: initial; + --color-inherit: inherit; + --color-transparent: transparent; + --color-current: currentColor; + --color-black: rgb(0 0 0); + --color-white: rgb(255 255 255); + + --color-lavender-blue-50: #f2f3ff; + --color-lavender-blue-100: #e4e7ff; + --color-lavender-blue-200: #c9cfff; + --color-lavender-blue-300: #aeb8ff; + --color-lavender-blue-400: #93a0ff; + --color-lavender-blue-500: #7888ff; + --color-lavender-blue-600: #606dcc; + --color-lavender-blue-700: #485299; + --color-lavender-blue-800: #303666; + --color-lavender-blue-900: #181b33; +} + +@theme { + --animate-fade: fadeIn 0.25s ease-in-out; + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } +} + +html { + font-family: var(--font-display); +} diff --git a/templates/react-example/tailwind.config.js b/templates/react-example/tailwind.config.js deleted file mode 100644 index 33104f21..00000000 --- a/templates/react-example/tailwind.config.js +++ /dev/null @@ -1,41 +0,0 @@ -import {fontFamily} from 'tailwindcss/defaultTheme'; - -/** @type {import('tailwindcss').Config} */ -export default { - content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], - theme: { - fontFamily: { - sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans] - }, - extend: { - animation: { - fade: 'fadeIn .25s ease-in-out' - }, - keyframes: { - fadeIn: { - from: {opacity: '0'}, - to: {opacity: '1'} - } - } - }, - colors: { - inherit: 'inherit', - transparent: 'transparent', - current: 'currentColor', - black: 'rgb(0 0 0)', - white: 'rgb(255 255 255)', - ['lavender-blue']: { - 50: '#f2f3ff', - 100: '#e4e7ff', - 200: '#c9cfff', - 300: '#aeb8ff', - 400: '#93a0ff', - 500: '#7888ff', - 600: '#606dcc', - 700: '#485299', - 800: '#303666', - 900: '#181b33' - } - } - } -}; diff --git a/templates/react-example/vite.config.js b/templates/react-example/vite.config.js index 1b105a9e..a2267f9f 100644 --- a/templates/react-example/vite.config.js +++ b/templates/react-example/vite.config.js @@ -2,8 +2,9 @@ import juno from '@junobuild/vite-plugin'; import react from '@vitejs/plugin-react'; import {defineConfig} from 'vite'; import {nodePolyfills} from 'vite-plugin-node-polyfills'; +import tailwindcss from '@tailwindcss/vite'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react(), nodePolyfills(), juno({container: true})] + plugins: [react(), nodePolyfills(), juno({container: true}), tailwindcss()] }); diff --git a/templates/react-starter/package.json b/templates/react-starter/package.json index ed2ecc24..b1699f15 100644 --- a/templates/react-starter/package.json +++ b/templates/react-starter/package.json @@ -22,7 +22,7 @@ "@junobuild/config": "^0.1.0", "@junobuild/vite-plugin": "^0.0.19", "@tailwindcss/postcss": "^4.0.0", - "@tailwindcss/vite": "^4.0.5", + "@tailwindcss/vite": "^4.0.6", "@types/react": "19.0.0", "@types/react-dom": "19.0.0", "@vitejs/plugin-react": "^4.3.4", diff --git a/templates/react-ts-example/package.json b/templates/react-ts-example/package.json index c2e1a5ef..f0a8fd2f 100644 --- a/templates/react-ts-example/package.json +++ b/templates/react-ts-example/package.json @@ -22,10 +22,11 @@ "@eslint/js": "^9.17.0", "@junobuild/config": "^0.0.17", "@junobuild/vite-plugin": "^0.0.19", + "@tailwindcss/postcss": "^4.0.0", + "@tailwindcss/vite": "^4.0.6", "@types/react": "19.0.0", "@types/react-dom": "19.0.0", "@vitejs/plugin-react": "^4.3.4", - "autoprefixer": "^10.4.20", "eslint": "^9.17.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.1.0", @@ -33,7 +34,7 @@ "globals": "^15.14.0", "postcss": "^8.4.49", "prettier": "^3.4.2", - "tailwindcss": "^3.4.16", + "tailwindcss": "^4.0.0", "typescript": "^5.7.3", "typescript-eslint": "^8.20.0", "vite": "^6.0.3", diff --git a/templates/react-ts-example/postcss.config.js b/templates/react-ts-example/postcss.config.js deleted file mode 100644 index ba807304..00000000 --- a/templates/react-ts-example/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {} - } -}; diff --git a/templates/react-ts-example/src/App.tsx b/templates/react-ts-example/src/App.tsx index 0bce550f..6bf11bcc 100644 --- a/templates/react-ts-example/src/App.tsx +++ b/templates/react-ts-example/src/App.tsx @@ -19,7 +19,7 @@ const App: FC = () => { return ( <>
-
+

Example App

diff --git a/templates/react-ts-example/src/components/Backdrop.tsx b/templates/react-ts-example/src/components/Backdrop.tsx index 5a4a44bb..87cbc89a 100644 --- a/templates/react-ts-example/src/components/Backdrop.tsx +++ b/templates/react-ts-example/src/components/Backdrop.tsx @@ -9,7 +9,7 @@ export const Backdrop: FC = (props) => { return (
+ className={`fixed inset-0 z-40 ${spinner ? 'backdrop-blur-xs' : 'backdrop-blur-xl'} bg-white/30 flex items-center justify-center`}> {spinner && (
+