motayeb/tailwind.config.js
Kazem Alghasi c16648678d - install local Tailwind
- fix more problems
2026-09-23 00:32:16 +03:30

86 lines
3.2 KiB
JavaScript

/**
* پیکربندی Tailwind CSS برای تم مطیب
*
* نحوه استفاده:
* npm install
* npm run build:css → برای پروداکشن (minify)
* npm run watch:css → برای توسعه (watch)
*
* بعد از build، فایل assets/css/tailwind.css ساخته می‌شه که
* به‌صورت خودکار در functions.php با enqueue_safe لود می‌شه.
*
* @package Motayeb
*/
/** @type {import('tailwindcss').Config} */
module.exports = {
// حالت دارک مود با کلاس 'dark' روی html یا body فعال می‌شه
darkMode: 'class',
// فایل‌هایی که Tailwind باید کلاس‌های استفاده‌شده در آن‌ها رو شناسایی کنه
content: [
'./*.php', // فایل‌های PHP در ریشه تم
'./woocommerce/**/*.php', // اوورراید‌های ووکامرس
'./template-parts/**/*.php', // اگه در آینده اضافه شد
'./ui.html', // فایل UI مرجع
],
theme: {
extend: {
colors: {
forest: {
50: '#e8f5ec', 100: '#c6e6cf', 200: '#9ed0ae', 300: '#6fb88a',
400: '#4a9a6b', 500: '#2D5F3F', 600: '#254d34', 700: '#1c3b28',
800: '#13291c', 900: '#0a1710',
},
cream: {
50: '#FDFBF7', 100: '#F5F0E8', 200: '#EBE3D5', 300: '#DDD2BF',
400: '#C4B49A', 500: '#A99478',
},
honey: {
50: '#FDF5ED', 100: '#F9E6D0', 200: '#F2CC9E', 300: '#E8AC6A',
400: '#D4A574', 500: '#C08B52', 600: '#A07040', 700: '#7D5630',
800: '#5A3D20', 900: '#3A2612',
},
earth: {
50: '#F5EDE7', 100: '#E8D5C7', 200: '#D4B5A0', 300: '#BF9276',
400: '#8B5A3C', 500: '#734A30', 600: '#5C3B25', 700: '#452C1B',
800: '#2E1D12', 900: '#170E09',
},
dark: {
bg: '#1A1D23',
card: '#22262E',
border: '#2E333D',
text: '#E8E6E3',
muted: '#9CA3AF',
},
},
fontFamily: {
vazir: ['Vazirmatn', 'Tahoma', 'sans-serif'],
inter: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'fade-in': 'fadeIn 0.6s ease-out forwards',
'slide-up': 'slideUp 0.6s ease-out forwards',
'slide-right':'slideRight 0.5s ease-out forwards',
'float': 'float 3s ease-in-out infinite',
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
},
keyframes: {
fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
slideUp: { '0%': { opacity: '0', transform: 'translateY(30px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
slideRight:{ '0%': { opacity: '0', transform: 'translateX(-20px)' }, '100%': { opacity: '1', transform: 'translateX(0)' } },
float: { '0%,100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' } },
pulseSoft: { '0%,100%': { opacity: '1' }, '50%': { opacity: '0.7' } },
},
},
},
plugins: [
// پلاگین line-clamp (در Tailwind 3.3+ داخلی شده، ولی برای اطمینان)
// نیازی به نصب جداگانه نیست.
],
};