如何使用tailwindcss和gulp？

kpbwa7wx 于 2022-12-08 发布在 Gulp

关注(0)|答案(2)|浏览(273)

我尝试使用tailwindcss与大口，这是我的gulpfile.js文件，但它没有工作...

const gulp = require('gulp')
const browserSync = require('browser-sync')
const postcss = require('gulp-postcss')
const less = require('gulp-less')
const px2rem = require('postcss-px2rem')
const autoprefixer = require('gulp-autoprefixer')
const cssnano = require('gulp-cssnano')
const rename = require('gulp-rename')
const precss = require('precss')
const tailwindcss = require('tailwindcss')

gulp.task('cssMobile', function() {
  const plugins = [
    px2rem({ remUnit: 75 }),
    precss,
    tailwindcss,
  ]
  return gulp.src(cssMobileCompilePath)
             .pipe(less())
             .pipe(postcss(plugins, {}))
             .pipe(cssnano())
             .pipe(autoprefixer())
             .pipe(rename({ extname: '.min.css' }))
             .pipe(gulp.dest(`${basePath}/mobile`))
             .pipe(browserSync.reload({ stream: true }))
})

我试着把这段代码放在我的 *.less根目录下。

@tailwind base;
@tailwind components;
@tailwind utilities;

当我运行gulp时，tailwindcss没有打包到我css文件中。

gulp

来源：https://stackoverflow.com/questions/73117211/how-to-use-tailwindcss-with-gulp

2条答案

按热度按时间

cbwuti441#

也许你可以引用gulp-with-tailwindcss

赞(0）回复(0）举报 2022-12-08

koaltpgm2#

欢迎光临！
首先，您需要在终端中创建顺风配置：

npx tailwindcss init

它将创建tailwind.config.cjs
接下来你需要通过传递参数来为tailwind plugin赋值tailwind.config.cjs。在你的例子中：

const plugins = [
    px2rem({ remUnit: 75 }),
    precss,
    tailwindcss('./tailwind.config.cjs'),
  ]

这里我假设gulpfile.js和tailwind.config.cjs在同一个文件夹中
接下来在tailwind.config.cjs点文件whititch tailwind必须看如下：

module.exports = {
  content: [
      './src/**/*.html',
      './src/**/*.js',
      './src/**/*.scss',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

我想我不需要解释如何指定路径
然后，如果你像browsersync一样使用livereload，你需要在www.example.com中gulp.watch为html和js设置cssMobile任务，如果你想看到在任何地方及时应用tailwind类。例如：

function watcher() {
    gulp.watch(path.watch.html, scss);
    gulp.watch(path.watch.scss, scss);
    gulp.watch(path.watch.js, scss);
}

注意在顺风之前不需要使用gulp-autoprefixer您需要在顺风之前使用pure autoprefixer

npm i -D autoprefixer

然后

const autoprefixer = require('autoprefixer');

然后把它传递给postcss插件后顺风：

const plugins = [
    px2rem({ remUnit: 75 }),
    precss,
    tailwindcss('./tailwind.config.cjs'),
    autoprefixer,
  ]

最后，为了完美的自动前缀工作，你可以添加**.browserslistrc**文件。

> 1%
ie >= 8
edge >= 15
ie_mob >= 10
ff >= 45
chrome >= 45
safari >= 7
opera >= 23
ios >= 7
android >= 4
bb >= 10

或者在package.json中指定：

"browserslist": [
    "> 1%",
    "ie >= 8",
    "edge >= 15",
    "ie_mob >= 10",
    "ff >= 45",
    "chrome >= 45",
    "safari >= 7",
    "opera >= 23",
    "ios >= 7",
    "android >= 4",
    "bb >= 10"
  ],

希望对你有帮助

赞(0）回复(0）举报 2022-12-08

我来回答

如何使用tailwindcss和gulp？

2条答案

相关问题

热门标签

最新问答