Gulp with TailwindCSS set-up issue - Django project - css

Question

I have a django blog project, which is up and running on a live server.
I am using the TailwindCSS framework, and as part of that I have followed the extensive tutorial on setting up Gulp. I am experimenting with responsive design, but when I add eg:
<div style="flex-wrap justify-end w-full p-6 m-auto border md:bg-blue sm:bg-yellow lg:bg-black>
Only one (sometimes two, but not all three) of the responsive bg elements actually works when I alter the window in Chrome Dev Tools. I have tried clearing my browser cache as I know this sometimes causes problems. This got me thinking that my setup isn't right, and then I realised my understanding of gulp needs to improve.
I have the root static folder as the collection point for my gulp outputs and collectstatic, and the structure of my project is as follows:
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']);
I appreciate the layout of this file and my structure is a little messy.
Without calling "gulp" in the command line, my Tailwind styles mostly work fine. My questions are:
When I call gulp, why is there no output in my static folders? What changes need to be made to ensure this works? Eg: My django templates should be being pulled through the html pipe.
When I call collectstatic, this updates the css files in /static (hence the two CSS files in the root static. What is the difference between using gulp and collectstatic, and how do I use them together?
At what point should I be using gulp and gulp start? I feel like I have put a lot of effort in to implementing this, but it is just wasted on me :-(
Are the issues I'm having with TailwindCSS responsive attributes related to my gulp set-up or lack of usage of gulp?
Many thanks,
David

Answer 1

i hope you solved this incase u did not i would recommend you use this package to easily integrate tailwind css with Django check it out here https://github.com/timonweb/django-tailwind