Files
Sub-Router/tailwind.config.js
T
abingyydsandClaude Sonnet 4.6 662685cc97 feat: add language switch button and optimize theme visuals
- Add LanguageSwitch component to all 4 theme layouts (starter/default/dark/minimal)
- Import Noto Sans SC for proper Chinese font rendering
- Fix theme flash on refresh by blocking render until site info loads
- Optimize default theme: violet/blue/cyan palette, SVG icons instead of emoji
- Optimize dark theme: unified emerald accent, reduced particle count, backdrop-blur
- Add Tailwind safelist for dark theme dynamic class names
- Prioritize localStorage in i18n detection so manual language choice persists

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-21 10:19:38 +09:00

62 lines
2.0 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,jsx}'],
darkMode: 'class',
safelist: [
// Dark theme uses dynamic accent colors
{ pattern: /border-(emerald|cyan|violet)-500\/(10|15|20|25)/ },
{ pattern: /bg-(emerald|cyan|violet)-500\/(10|15)/ },
{ pattern: /text-(emerald|cyan|violet)-400/ },
{ pattern: /from-(emerald|cyan|violet)-500\/(50|10)/ },
{ pattern: /to-(emerald|cyan|violet|teal)-500\/(10)/ },
],
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'Noto Sans SC', 'system-ui', '-apple-system', 'sans-serif'],
heading: ['Inter', 'Noto Sans SC', 'system-ui', '-apple-system', 'sans-serif'],
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
},
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
},
},
animation: {
'star-movement-bottom': 'star-movement-bottom linear infinite alternate',
'star-movement-top': 'star-movement-top linear infinite alternate',
'fade-in': 'fade-in 0.5s ease-out',
'slide-up': 'slide-up 0.5s ease-out',
},
keyframes: {
'star-movement-bottom': {
'0%': { transform: 'translate(0%, 0%)', opacity: '1' },
'100%': { transform: 'translate(-100%, 0%)', opacity: '0' },
},
'star-movement-top': {
'0%': { transform: 'translate(0%, 0%)', opacity: '1' },
'100%': { transform: 'translate(100%, 0%)', opacity: '0' },
},
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
'slide-up': {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
},
},
},
plugins: [],
};