为什么tailwindcss不能在webpack中使用sass文件正确导入所有组件?

Question

学习完tailwindcss后，我想在webpack中试一试。但是webpack输出文件比我在构建tailwindcss时得到的构建文件要小。详情如下:colors.scss文件

:root {
--color-dark-1: #0D1117;
--color-dark-2: #161B22;
}

postcss.config.jsfile

module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer')
]
}

tailwind.config.jsfile

module.exports = {
mode: 'jit',
purge: [],
darkMode: false,
theme: {
extend: {
colors:{
black:{
100: 'var(--color-dark-1)',
200: 'var(--color-dark-2)'
}
}
},
},
variants: {
extends:{}
},
plugins: [],
};

app.scssfile

@import './scss/colors';
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

webpack.config.jsfile

const { merge } = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
var common = {
module : {
rules : [
{
test: [/.scss$/, /.css$/],
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /.js$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader'
}
]
},

]
},
optimization: {
minimize: true,
minimizer: [
new TerserWebpackPlugin(),
new CssMinimizerPlugin({})
]
}
};
module.exports = [
merge(common, {
devtool: 'eval-source-map',
entry: [
__dirname + '/app/app.scss',
__dirname + '/app/app.js'
],
output: {
path: __dirname + '/../public',
filename: 'js/app.js',
},
resolve: {
modules: [
'/node_modules',
__dirname + '/app'
]
}
})
];

输出文件不包括所有的tailwindcss导入文件。使用npx tailwindcss init --full命令生成tailwind.config.js生成默认配置文件后，可以正常工作。我想知道为什么在webpack它需要生成默认配置文件。使用postcss构建无需生成默认的tailwind.config.js文件

Answer 1

很抱歉，我不得不从tailwind.config.js文件中删除mode: 'jit'。JTI特性目前处于预览状态