Использование tailwindcss облегчает и убыстряет разработку html макетов, но на официальном сайте вы не найдете инструкции для разработки вместе со сборщиком gulp.
В данной статье мы разберем настройку tailwind.config.js, postcss.config.js, package.json и gulpfile.js
Подробнее о работе с gulp мы рассматривали в этой статье
tailwind.config.js
module.exports = { purge: ["./src/**/*.css", "./**/*.html"], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [],
}postcss.config.js
module.exports = { plugins: { tailwindcss: {}, autoprefixer: { browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', ], flexbox: true }, },
}package.json
{ "name": "", "version": "1.0.0", "description": "", "main": "gulpfile.js", "scripts": { "dev": "gulp", "build": "NODE_ENV=production gulp css", "build-images": "gulp images" }, "author": "", "license": "ISC", "devDependencies": { "gulp-autoprefixer": "^7.0.1", "gulp-postcss": "^9.0.0", "gulp-uglify": "^3.0.2", "tailwindcss": "^2.1.2", "autoprefixer": "^10.2.5", "gulp-sourcemaps" : "^3.0.0" }
}gulpfile.js
const { watch, series, src, dest } = require("gulp");
var browserSync = require("browser-sync").create();
var postcss = require("gulp-postcss");
var tailwindcss = require('tailwindcss');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var autoprefixer = require('autoprefixer');
const imagemin = require("gulp-imagemin");
function cssTask(cb) { return src("./src/*.css") .pipe(sourcemaps.init()) .pipe(postcss([ tailwindcss('./tailwind.config.js'), autoprefixer() ] )) .pipe(sourcemaps.write('.')) .pipe(dest("./assets/css")) .pipe(browserSync.stream()); cb();
}
function jsTask(cb){ return src("./src/*.js") .pipe(uglify()) .pipe(dest("./assets/js")) .pipe(browserSync.stream()); cb();
}
function imageminTask(cb) { return src("./assets/images/*") .pipe(imagemin()) .pipe(dest("./assets/images")); cb();
}
function browsersyncServe(cb) { browserSync.init({ server: { baseDir: "./", }, }); cb();
}
function browsersyncReload(cb) { browserSync.reload(); cb();
}
function watchTask() { watch("./**/*.html", browsersyncReload); watch(["./src/*.js"], series(jsTask, browsersyncReload)); watch(["./src/*.css"], series(cssTask, browsersyncReload));
}
exports.default = series(jsTask, cssTask, browsersyncServe, watchTask);
exports.css = cssTask;
exports.js = jsTask;
exports.images = imageminTask;Структура папок
|-- Root dir |-- index.html |-- package.json |-- gulpfile.js |-- tailwind.config.js |-- src |-- style.scss |-- img |-- index.js |-- assets |-- css |-- js |-- image
Готовые файлы
Скачайте готовые файлы для работы и загрузите их в корневую папку проекта:
