我正在使用 Laravel Jetstream 和 TailwindCSS。我已经根据我对项目的一些要求修改了一些 config.js 文件(webpack、tailwind 等)。出于某种原因,当我编译运行时npm run dev
,它将配置所有颜色(例如,,,bg-red-100
... ) bg-red-200
,bg-red-300
但是当我在生产中编译时(npm run production
),它缺少一些(,,,bg-red-100
... bg-red-400
)bg-red-500
。
webpack.mix.js
:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
webpack.config.js
:
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};
tailwind.config.js
:
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')
module.exports = {
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'fhosting-blue': {
50: '#98e2f3',
100: '#83dcf1',
200: '#6ed7ee',
300: '#5ad1ec',
400: '#45cbea',
500: '#31c6e8',
600: '#2cb2d0',
700: '#279eb9',
800: '#228aa2',
900: '#1d768b',
DEFAULT: '#31c6e8'
},
'fhosting-green': {
50: '#98f3cf',
100: '#83f1c5',
200: '#6eeebb',
300: '#5aecb2',
400: '#45eaa8',
500: '#31e89f',
600: '#2cd08f',
700: '#27b97f',
800: '#22a26f',
900: '#1d8b5f',
DEFAULT: '#31e89f'
},
},
borderColor: {
'fhosting-blue': '#31c6e8',
'fhosting-green': '#31e89f'
}
},
colors: {
transparent: 'transparent',
current: 'currentColor',
amber: colors.amber,
black: '#000',
blue: colors.blue,
blueGray: colors.blueGray,
coolGray: colors.coolGray,
cyan: colors.cyan,
emerald: colors.emerald,
fuchsia: colors.fuchsia,
gray: colors.gray,
green: colors.green,
indigo: colors.indigo,
lightBlue: colors.lightBlue,
lime: colors.lime,
orange: colors.orange,
pink: colors.pink,
purple: colors.purple,
red: colors.red,
rose: colors.rose,
teal: colors.teal,
trueGray: colors.trueGray,
violet: colors.violet,
warmGray: colors.warmGray,
white: '#FFF',
yellow: colors.yellow,
}
},
variants: {
opacity: ['responsive', 'hover', 'focus', 'disabled'],
backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};
当我运行时,npm run development
我得到以下 CSS 颜色(以红色为例):
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
}
.bg-red-300 {
--tw-bg-opacity: 1;
background-color: rgba(252, 165, 165, var(--tw-bg-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
}
.bg-red-700 {
--tw-bg-opacity: 1;
background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}
.bg-red-800 {
--tw-bg-opacity: 1;
background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
}
.bg-red-900 {
--tw-bg-opacity: 1;
background-color: rgba(127, 29, 29, var(--tw-bg-opacity));
}
当我运行时,npm run production
我得到以下 CSS 文件(以红色为例):
.bg-red-100 {
--tw-bg-opacity:1;background-color: rgba(254,226,226,var(--tw-bg-opacity))
}
.bg-red-400 {
--tw-bg-opacity:1;background-color: rgba(248,113,113,var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity:1;background-color: rgba(239,68,68,var(--tw-bg-opacity))
}
.bg-red-600 {
--tw-bg-opacity:1;background-color: rgba(220,38,38,var(--tw-bg-opacity))
}
.bg-red-700 {
--tw-bg-opacity:1;background-color: rgba(185,28,28,var(--tw-bg-opacity))
}
什么可能导致此问题?我需要配置颜色,因为我正在使用它们让客户自定义他们的界面。