Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT Enhance Tailwind configuration with new color palettes and responsive breakpoints

Browse Source
This commit is contained in:
Antoine 2025-05-12 16:48:24 +02:00
parent 9c64e6f095
commit ff73bef39e
1 changed files with 79 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
tailwind.config.js
View File

@ -1,5 +1,13 @@
const theme = require('./theme.json');
const tailpress = require("@jeffreyvr/tailwindcss-tailpress");
const tailpress = require('@jeffreyvr/tailwindcss-tailpress');
// Fonction pour obtenir la couleur de base depuis theme.json
const getBaseColor = (slug) => {
const color = theme.settings.color.palette.find(
(c) => c.slug === slug
);
return color ? color.color : null;
};
module.exports = {
content: [
@ -7,30 +15,70 @@ module.exports = {
'./**/*.php',
'./resources/css/*.css',
'./resources/js/*.js',
'./safelist.txt'
'./safelist.txt',
],
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '0rem'
lg: '0rem',
},
},
extend: {
colors: tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)),
fontSize: tailpress.fontSizeMapper(tailpress.theme('settings.typography.fontSizes', theme))
colors: {
...tailpress.colorMapper(
tailpress.theme('settings.color.palette', theme)
),
'carhop-orange': {
50: '#fff8eb',
100: '#ffebc6',
200: '#ffd588',
300: '#ffba4a',
400: getBaseColor('carhop-orange'), // Base Color
500: '#f97a07',
600: '#dd5602',
700: '#b73806',
800: '#942a0c',
900: '#7a240d',
950: '#461002',
},
'carhop-purple': {
50: '#f8f5ff',
100: '#efe8ff',
200: '#e2d4ff',
300: getBaseColor('carhop-purple'), // Base Color
400: '#ab82fe',
500: '#8c53f9',
600: '#7331ec',
700: '#6020d0',
800: '#531faa',
900: '#451b88',
950: '#2b0665',
},
},
fontSize: tailpress.fontSizeMapper(
tailpress.theme(
'settings.typography.fontSizes',
theme
)
),
},
screens: {
'xs': '480px',
'sm': '600px',
'md': '782px',
'lg': tailpress.theme('settings.layout.contentSize', theme),
'xl': tailpress.theme('settings.layout.wideSize', theme),
'2xl': '1440px'
}
xs: '480px',
sm: '600px',
md: '782px',
lg: tailpress.theme(
'settings.layout.contentSize',
theme
),
xl: tailpress.theme(
'settings.layout.wideSize',
theme
),
'2xl': '1440px',
'3xl': '1840px',
},
plugins: [
tailpress.tailwind
]
},
plugins: [tailpress.tailwind],
};