Использование 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
Готовые файлы
Скачайте готовые файлы для работы и загрузите их в корневую папку проекта: