On m'a demandé d'ajouter 1 nouveau thème à un projet existant qui utilise actuellement Tailwind.
Le nouveau thème ne prendra effet que si "nom-thème" existe dans l'attribut de classe de balise body.
现有的tailwind.config.js是这样的：
const defaultTheme = require('tailwindcss/defaultTheme'); var couleurs = { gris: { PAR DÉFAUT : '#868692', 50 : '#F9FAFB', 100 : '#F5F5FA', 200 : '#E9E9EE', 300 : '#D1D5DB', 400 : '#9CA3AF', 500 : '#868692', 600 : '#667085', 700 : '#504F4F', 800 : '#2D3047', 900 : '#111827' }, primaire: { PAR DÉFAUT : '#009BF5', 50 : '#DBF2FF', 100 : '#E5F6FE', 200 : '#8FD6FF', 300 : '#5CC3FF', 400 : '#29B0FF', 500 : '#009BF5', 600 : '#0078BD', 700 : '#005485', 800 : '#00314D', 900 : '#000D15', contraste : '#FFFFFF' }, secondaire : { PAR DÉFAUT : '#744FC6', 50 : '#EFEBF9', 100 : '#E2DAF3', 200 : '#C6B7E8', 300 : '#AB94DC', 400 : '#8F72D1', 500 : '#744FC6', 600 : '#5936A7', 700 : '#42287C', 800 : '#2C1B52', 900 : '#150D28', contraste : '#FFFFFF' }, succès: { PAR DÉFAUT : '#14CC76', 50 : '#B7F8D9', 100 : '#A2F6CF', 200 : '#78F2B9', 300 : '#4EEEA3', 400 : '#24EA8D', 500 : '#14CC76', 600 : '#10A761', 700 : '#0D824B', 800 : '#095D36', 900 : '#053720', contraste : '#FFFFFF' }, erreur: { PAR DÉFAUT : '#FC446F', 50 : '#FFF9FA', 100 : '#FFE5EB', 200 : '#FEBCCC', 300 : '#FD94AD', 400 : '#FD6C8E', 500 : '#FC446F', 600 : '#FB0D44', 700 : '#CD0332', 800 : '#950225', 900 : '#5E0217', contraste : '#FFFFFF' }, avertissement: { PAR DÉFAUT : '#FD8204', 50 : '#FEDDBA', 100 : '#FEF8EF', 200 : '#FEBE7D', 300 : '#FEAA55', 400 : '#FD962C', 500 : '#FD8204', 600 : '#D66D02', 700 : '#AE5901', 800 : '#864401', 900 : '#5D2F01', contraste : '#FFFFFF' } } ; couleurs.ui = { texte : couleurs.gray['800'], textDim : couleurs.gray['500'], bordure : couleurs.gray['200'], borderDim: couleurs.gray['100'], borderDark : couleurs.gray['500'], bg : '#FFFFFF', bgDim : couleurs.gray['100'], bgDimmer : couleurs.gray['50'] } ; /**@type {import("tailwindcss").Config}*/ module.exports = { contenu : ['./src/**/*.{js,jsx,ts,tsx}'], corePlugins : { preflight : false // À remplacer par un autre qui résout certains problèmes avec les classes de contrôle en amont par vent arrière }, thème: { étendre: { couleurs : couleurs, Couleur du texte : { par défaut : couleurs.ui.text, faible : couleurs.ui.textDim }, Couleur de l'arrière plan: { par défaut : couleurs.ui.bg, faible : couleurs.ui.bgDim, gradateur : colors.ui.bgDimmer }, couleur de la bordure: { par défaut : colors.ui.border, faible : couleurs.ui.borderDim, sombre : colors.ui.borderDark }, borderRadius : { carte : '0.625rem' }, boîte ombre: { lg : '0 0 16px 8px rgba(0, 0, 0, 0,02)' }, taille de police: { '2xs' : '0,625rem', '3,5xl' : '2rem' }, famille de polices: { sans : ['Poppins', ...defaultTheme.fontFamily.sans], // À FAIRE : Installer la police Gibson mono: [ 'canada-type-gibson, sans-serif', ...par défautTheme.fontFamily.mono ] // serif : ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif] }, zIndex : { liste déroulante : 1000, Modale : 9000 }, propriété de transition : { position : "largeur, hauteur, gauche, haut" }, transitionTimingFunction : { 'out-back' : 'cubique-bézier(0,34, 1,56, 0,64, 1)' } } }, plugins : [require('@tailwindcss/forms'), require('@tailwindcss/typography')] }; ... Seules les couleurs ont changé dans ce nouveau thème complémentaire.
Quelqu'un peut-il m'indiquer la bonne direction pour configurer cela ? J'ai déjà "nom du thème" dans mon attribut de classe de balise body.
Merci pour vos conseils, Gram...
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
D'accord, j'ai trouvé tailwindcss-themer et ça a fonctionné.
https://github.com/RyanClementsHax/tailwindcss-themer
const defaultTheme = require('tailwindcss/defaultTheme');
var colors = { gray: { DEFAULT: '#868692', 50: '#F9FAFB', 100: '#F5F5FA', 200: '#E9E9EE', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#868692', 600: '#667085', 700: '#504F4F', 800: '#2D3047', 900: '#111827' }, primary: { DEFAULT: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', contrast: '#FFFFFF' }, secondary: { DEFAULT: '#744FC6', 50: '#EFEBF9', 100: '#E2DAF3', 200: '#C6B7E8', 300: '#AB94DC', 400: '#8F72D1', 500: '#744FC6', 600: '#5936A7', 700: '#42287C', 800: '#2C1B52', 900: '#150D28', contrast: '#FFFFFF' }, success: { DEFAULT: '#14CC76', 50: '#B7F8D9', 100: '#A2F6CF', 200: '#78F2B9', 300: '#4EEEA3', 400: '#24EA8D', 500: '#14CC76', 600: '#10A761', 700: '#0D824B', 800: '#095D36', 900: '#053720', contrast: '#FFFFFF' }, error: { DEFAULT: '#FC446F', 50: '#FFF9FA', 100: '#FFE5EB', 200: '#FEBCCC', 300: '#FD94AD', 400: '#FD6C8E', 500: '#FC446F', 600: '#FB0D44', 700: '#CD0332', 800: '#950225', 900: '#5E0217', contrast: '#FFFFFF' }, warning: { DEFAULT: '#FD8204', 50: '#FEDDBA', 100: '#FEF8EF', 200: '#FEBE7D', 300: '#FEAA55', 400: '#FD962C', 500: '#FD8204', 600: '#D66D02', 700: '#AE5901', 800: '#864401', 900: '#5D2F01', contrast: '#FFFFFF' }, info: { // used for alarts and status DEFAULT: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', contrast: '#FFFFFF' }, }; colors.ui = { text: colors.gray['800'], textDim: colors.gray['500'], border: colors.gray['200'], borderDim: colors.gray['100'], borderDark: colors.gray['500'], bg: '#FFFFFF', bgDim: colors.gray['100'], bgDimmer: colors.gray['50'] }; var colorsSB = { gray: { DEFAULT: '#868692', 50: '#F9FAFB', 100: '#F5F5FA', 200: '#E9E9EE', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#868692', 600: '#667085', 700: '#504F4F', 800: '#2D3047', 900: '#111827' }, primary: { DEFAULT: '#F7941D', 50: '#FDEBDB', 100: '#FCE3CC', 200: '#F9C298', 300: '#F7AD64', 400: '#F69430', 500: '#F7941D', 600: '#F67900', 700: '#E06200', 800: '#C74A00', 900: '#A83100', contrast: '#FFFFFF' }, secondary: { DEFAULT: '#744FC6', 50: '#EFEBF9', 100: '#E2DAF3', 200: '#C6B7E8', 300: '#AB94DC', 400: '#8F72D1', 500: '#744FC6', 600: '#5936A7', 700: '#42287C', 800: '#2C1B52', 900: '#150D28', contrast: '#FFFFFF' }, success: { DEFAULT: '#14CC76', 50: '#B7F8D9', 100: '#A2F6CF', 200: '#78F2B9', 300: '#4EEEA3', 400: '#24EA8D', 500: '#14CC76', 600: '#10A761', 700: '#0D824B', 800: '#095D36', 900: '#053720', contrast: '#FFFFFF' }, error: { DEFAULT: '#FC446F', 50: '#FFF9FA', 100: '#FFE5EB', 200: '#FEBCCC', 300: '#FD94AD', 400: '#FD6C8E', 500: '#FC446F', 600: '#FB0D44', 700: '#CD0332', 800: '#950225', 900: '#5E0217', contrast: '#FFFFFF' }, warning: { DEFAULT: '#FD8204', 50: '#FEDDBA', 100: '#FEF8EF', 200: '#FEBE7D', 300: '#FEAA55', 400: '#FD962C', 500: '#FD8204', 600: '#D66D02', 700: '#AE5901', 800: '#864401', 900: '#5D2F01', contrast: '#FFFFFF' }, info: { // used for alarts and status DEFAULT: '#009BF5', 50: '#DBF2FF', 100: '#E5F6FE', 200: '#8FD6FF', 300: '#5CC3FF', 400: '#29B0FF', 500: '#009BF5', 600: '#0078BD', 700: '#005485', 800: '#00314D', 900: '#000D15', contrast: '#FFFFFF' }, }; colorsSB.ui = { text: colorsSB.gray['800'], textDim: colorsSB.gray['500'], border: colorsSB.gray['200'], borderDim: colorsSB.gray['100'], borderDark: colorsSB.gray['500'], bg: '#FFFFFF', bgDim: colorsSB.gray['100'], bgDimmer: colorsSB.gray['50'] }; /** @type {import("tailwindcss").Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], corePlugins: { preflight: false // To replace with another that solves some issues with tailwind preflight classes }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('tailwindcss-themer')({ defaultTheme: { // put the default values of any config you want themed // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme extend: { colors: colors, textColor: { default: colors.ui.text, dim: colors.ui.textDim }, backgroundColor: { default: colors.ui.bg, dim: colors.ui.bgDim, dimmer: colors.ui.bgDimmer }, borderColor: { default: colors.ui.border, dim: colors.ui.borderDim, dark: colors.ui.borderDark }, borderRadius: { card: '0.625rem' }, boxShadow: { lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)' }, fontSize: { '2xs': '0.625rem', '3.5xl': '2rem' }, fontFamily: { sans: ['Poppins', ...defaultTheme.fontFamily.sans], // TODO: Install Gibson font mono: [ 'canada-type-gibson, sans-serif', ...defaultTheme.fontFamily.mono ] // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif] }, zIndex: { dropdown: 1000, modal: 9000 }, transitionProperty: { position: 'width,height,left,top' }, transitionTimingFunction: { 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)' } } }, themes: [ { // name your theme anything that could be a valid css class name // remember what you named your theme because you will use it as a class to enable the theme name: 'additionalThemeName', // put any overrides your theme has here // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme extend: { colors: colorsSB, textColor: { default: colorsSB.ui.text, dim: colorsSB.ui.textDim }, backgroundColor: { default: colorsSB.ui.bg, dim: colorsSB.ui.bgDim, dimmer: colorsSB.ui.bgDimmer }, borderColor: { default: colorsSB.ui.border, dim: colorsSB.ui.borderDim, dark: colorsSB.ui.borderDark }, borderRadius: { card: '0.625rem' }, boxShadow: { lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)' }, fontSize: { '2xs': '0.625rem', '3.5xl': '2rem' }, fontFamily: { sans: ['Poppins', ...defaultTheme.fontFamily.sans], // TODO: Install Gibson font mono: [ 'canada-type-gibson, sans-serif', ...defaultTheme.fontFamily.mono ] // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif] }, zIndex: { dropdown: 1000, modal: 9000 }, transitionProperty: { position: 'width,height,left,top' }, transitionTimingFunction: { 'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)' } } } ] }) ] };