Как подключить Tailwindcss к gulp проекту?

Для подключения Tailwindcss к проекту на Gulp.js, вам потребуется выполнить несколько шагов:

Шаг 1: Установка зависимостей
Первым делом убедитесь, что у вас установлен Gulp и npm (пакетный менеджер Node.js). Далее, перейдите в корневую директорию вашего проекта, откройте командную строку и выполните следующую команду:

npm init

Это создаст package.json файл, где будут храниться все зависимости вашего проекта.

Далее, установите Gulp локально:

npm install --save-dev gulp

Также установите пакет gulp-postcss и autoprefixer, которые помогут вам обработать файлы CSS:

npm install --save-dev gulp-postcss autoprefixer

Установите также пакет tailwindcss:

npm install --save-dev tailwindcss

Шаг 2: Создание файлов конфигурации
Создайте файлы конфигурации для Gulp и Tailwindcss в корневой директории вашего проекта.

gulpfile.js:

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

gulp.task('css', function () {
    return gulp.src('src/css/*.css') // измените путь, если у вас другая структура проекта
        .pipe(postcss([
            require('tailwindcss'),
            autoprefixer
        ]))
        .pipe(gulp.dest('dist/css')); // измените путь, если вы хотите выходить в другую директорию
});

gulp.task('default', gulp.series('css'));

tailwind.config.js:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Шаг 3: Настройка сборки CSS
В файле gulpfile.js создайте таск для сборки CSS. В этом таске мы используем gulp.src() для указания исходных файлов CSS, после чего запускаем через gulp-postcss(), передавая ему tailwindcss и autoprefixer.

Шаг 4: Запуск Gulp
Команда для запуска Gulp указывается в package.json файле. Откройте его и добавьте следующий скрипт:

...
"scripts": {
  "build": "gulp"
},
...

И теперь вы можете запустить сборку командой:

npm run build

Gulp будет обрабатывать ваш CSS и создаст итоговый файл в папке dist/css.

Вот и все! Теперь вы можете использовать Tailwindcss в вашем проекте на Gulp.js. Обратите внимание на то, что мы не использовали purge опцию в файле tailwind.config.js, но если вам нужно, вы можете настроить ее в соответствии с вашими потребностями, чтобы уменьшить размер итогового файла CSS.