Проблема с настройкой TailwindCSS - проект Django

Question

У меня есть проект блога django, который запущен на работающем сервере.

Я использую инфраструктуру TailwindCSS, и как часть этого я следовал обширному руководству по настройке Gulp. Я экспериментирую с адаптивным дизайном, но когда добавляю, например:

<div style="flex-wrap justify-end w-full p-6 m-auto border md:bg-blue sm:bg-yellow lg:bg-black>

Только один (иногда два, но не все три) адаптивных элементов bg действительно работает, когда я изменяю окно в Chrome Dev Tools. Я попытался очистить кеш браузера, так как знаю, что иногда это вызывает проблемы. Это заставило меня задуматься о том, что мои установки неправильны, и тогда я понял, что мое понимание глотка нуждается в улучшении.

У меня есть корневая статическая папка в качестве точки сбора для моих выводов gulp и collectstatic, и структура моего проекта следующая:

nomadpad-
    -static
        -css
            -styles.css
            -custom.css
    -posts (app)
        -static
            -css
                -styles.css
                -custom.css
    -src
        -css
            -styles.css (default tailwind config file)
    - ...

.gulpfile:

//Include Gulp

var gulp = require('gulp');
var connect = require('gulp-connect');
var postcss = require('gulp-postcss');
var pug = require('gulp-pug');
var autoprefixer = require('autoprefixer');

//Define base folders

var src = '/src/';
var dest = '/static/';
var posts = '/posts/static/';

// Include plugins

var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
  replaceString: /\bgulp[\-.]/
});

// Concatenate & Minify JS

gulp.task('scripts', function() {

  var jsFiles = [posts + 'js/*'];
  //plugins.mainBowerFiles() returns an array of all the main 
  //files from the packages and 
  //plugins.filter('*.js') uses gulp-filter to pass only JS files.
  gulp.src(plugins.mainBowerFiles().concat(jsFiles))
    .pipe(plugins.filter('*.js'))
    .pipe(plugins.concat('main.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'js'));

});

//Compile CSS

gulp.task('css', function() {

  var cssFiles = [posts +'css/*'];

  gulp.src(plugins.mainBowerFiles().concat(cssFiles))
    .pipe(plugins.filter('*.css'))
    .pipe(plugins.concat('main.css'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'css'));

});

// Compile tailwind

gulp.task('tailwind', function () {
  var postcss = require('gulp-postcss');
  var tailwindcss = require('tailwindcss');

  return gulp.src(posts + 'css/*')
    .pipe(postcss([
      tailwindcss('tailwind.js'),
      require('autoprefixer'),
    ]))
    .pipe(gulp.dest(dest + 'css/*'))
    .pipe(connect.reload())
});

gulp.task('html', function() {
  gulp.src('./templates/posts/*.html')
    .pipe(pug())
    .pipe(gulp.dest(dest + 'html'))
});

// Watch for changes in files

gulp.task('watch', function() {
   gulp.watch(dest + 'css/*', ['css']);
   gulp.watch(dest + 'html/*', ['html']);
   gulp.watch(dest + 'js/*', ['scripts']);

});

gulp.task('connect', function() {
  connect.server({
    root: 'build',
    livereload: true,
    open: true
  });
});

// Default Task

gulp.task('default', ['css', 'tailwind', 'html', 'scripts']);

gulp.task('start', ['connect', 'watch']);

Я ценю макет этого файла, и моя структура немного грязная.

Без вызова "gulp" в командной строке мои стили Tailwind в основном работают нормально. Мои вопросы:

1. Когда я вызываю gulp, почему в моих статических папках нет вывода? Какие изменения необходимо внести, чтобы это работало? Например: мои шаблоны django должны быть пропущены через канал HTML.

2. Когда я вызываю collectstatic, это обновляет CSS-файлы в / static (отсюда и два CSS-файла в корневом статическом. В чем разница между использованием gulp и collectstatic и как их использовать вместе?

3. В какой момент я должен использовать gulp и gulp start? Я чувствую, что приложил много усилий для реализации этого, но это просто напрасно для меня:-(

4. Проблемы, связанные с отзывчивыми атрибутами TailwindCSS, связаны с настройкой gulp или отсутствием использования gulp?

Большое спасибо, Дэвид

Answer 1

Надеюсь, вы решили эту проблему, если вы не сделали этого, я бы порекомендовал вам использовать этот пакет для простой интеграции Tailwind css с Django, проверьте его здесь https://github.com/timonweb/django-tailwind