不使用 Tailwind CSS 减少 css 文件

Posted

技术标签:

【中文标题】不使用 Tailwind CSS 减少 css 文件【英文标题】:Does not reducing css file with Tailwind CSS 【发布时间】:2022-01-01 10:45:59 【问题描述】:

我尝试将 Tailwind 用于我的项目。但我不能减少我的 css 文件。

这是我项目的结构:

gulpfile.js:

const gulp = require('gulp');
const babel = require("gulp-babel");
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();
const environments = require('gulp-environments');
const uglifycss = require('gulp-uglifycss');
const terser = require('gulp-terser');
const postcss = require('gulp-postcss');
const purgecss = require('gulp-purgecss');
const production = environments.production;
gulp.task('watch', () => 
    browserSync.init(
        proxy: 'localhost:8080',
    );
    gulp.watch(['src/main/resources/**/*.html'], gulp.series('copy-html-and-reload'));
    gulp.watch(['src/main/resources/**/*.css'], gulp.series('copy-css-and-reload'));
    gulp.watch(['src/main/resources/**/*.js'], gulp.series('copy-js-and-reload'));
);
gulp.task('copy-html', () =>
    gulp.src(['src/main/resources/**/*.html'])
        .pipe(gulp.dest('target/classes/'))
);
gulp.task('copy-css', () =>
    gulp.src(['src/main/resources/**/*.css'])
        .pipe(postcss())
        .pipe(production(uglifycss()))
        .pipe(gulp.dest('target/classes/'))
);
gulp.task('copy-js', () =>
    gulp.src(['src/main/resources/**/*.js'])
        .pipe(babel())
        .pipe(production(terser()))
        .pipe(gulp.dest('target/classes/'))
);
gulp.task('copy-html-and-reload', gulp.series('copy-html', reload));
gulp.task('copy-css-and-reload', gulp.series('copy-css', reload));
gulp.task('copy-js-and-reload', gulp.series('copy-js', reload));
gulp.task('build', gulp.series('copy-html', 'copy-css', 'copy-js'));
gulp.task('default', gulp.series('watch'));
function reload(done) 
    browserSync.reload();
    done();

tailwind.config.js:

module.exports = 
  purge:
      
        content: ['./src/main/resources/templates/**/*.html']
      ,
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

package.json:


  "name": "tournament",
  "scripts": 
    "watch": "gulp watch",
    "build": "gulp build",
    "build-prod": "NODE_ENV='production' gulp build --env production"
  ,
  "dependencies": 
    "autoprefixer": "^10.4.0",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.19"
  ,
  "devDependencies": 
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "browser-sync": "^2.27.7",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-environments": "^1.0.1",
    "gulp-postcss": "^9.0.1",
    "gulp-purgecss": "^4.0.3",
    "gulp-terser": "^2.1.0",
    "gulp-uglifycss": "^1.1.0",
    "gulp-watch": "^5.0.1"
  


postcss.config.js:

module.exports = 
    plugins: 
        tailwindcss: ,
        autoprefixer: 
    

当我运行npm run build-prod 时,我放置在 target/classes/static/css/application.css 中的 css 文件不会减少。我究竟做错了什么?我尝试将 gulpfile.css 中文件的路径从 src/main/resources/**/.css 更改为 src/main/resources/static/css/.css,但没有帮助。我还在tailwind.config.js中更改了路径,但都是徒劳的。

【问题讨论】:

你能和github.com/wimdeblauwe/taming-thymeleaf-sources比较看看你有什么不同吗? @WimDeblauwe 抱歉,我找不到任何差异。在 npm run build-prod 之后,我得到了大尺寸的 css 文件。 你能在 GitHub 上放一个例子让我看看吗? @WimDeblauwe 是的,但我需要大约 1 小时才能完成此操作 @WimDeblauwe 我将文件上传到 github,但这不是完整的项目。现在我无法上传所有项目。看看这个github.com/eugenesmsk/Tournament 【参考方案1】:

请检查 PurgeCSS 的配置 - 它负责删除未使用的 CSS 代码 - https://www.npmjs.com/package/gulp-purgecss#user-content-usage

【讨论】:

以上是关于不使用 Tailwind CSS 减少 css 文件的主要内容,如果未能解决你的问题,请参考以下文章

下一代Tailwind CSS 将引入JIT编译器

flask 和 tailwind - 渲染时不使用 master.css 中的更改

如何使用 CSS 减少文本行之间的垂直间距?

Tailwind css 在部署时不工作

编译的 Tailwind CSS 不包含自定义导入文件

Tailwind css 适用于新课程不起作用