Gulp Sass and Tailwind with Timber

I have a project setup for Timber Wordpress development and want to try using tailwind.

I have followed some tutorials but new to Gulp.

In my Gulp file I have imported Gulp Sass and I can see that in my /src/css/style.css I am including the Tailwind includes in style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

It is a style.css file and it would be great if it was style.scss so I can write more custom scss.

How would I setup the project and Gulp file to include a scss file or group of files for extending tailwind as I need rather than having to write css?

Gulp:

const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const stripCssComments = require('gulp-strip-css-comments')
const cleanCSS = require('gulp-clean-css')
const livereload = require('gulp-livereload');

// WP write header and footer
const fs = require('fs')
const header = require('gulp-header')
const footer = require('gulp-footer')

// Package.JSON contents
const pkg = JSON.parse(fs.readFileSync('./package.json'))

function css() {
  const cssbanner = [
    '/*',
    'Theme Name:          ' + pkg.themename,
    'Description:         ' + pkg.description,
    'Author:              ' + pkg.author,
    'Author URI:          ' + pkg.authoruri,
    'Version:             ' + pkg.version,
    'Theme URI:           ' + pkg.homepage,
    'License:             ' + pkg.license,
    'License URI:         ' + pkg.licenseuri,
    'Text Domain:         ' + pkg.textDomain,
    '*/',
    ''
  ].join('\n')

  return gulp
    .src('src/css/style.css') // Change this to your own stylesheet
    .pipe(
      postcss([
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer')
      ])
    )
    .pipe(livereload())
    .pipe(stripCssComments({ preserve: false }))
    .pipe(cleanCSS(require('./configs/clean-css.js')))
    .pipe(
      header(cssbanner, {
        pkg: pkg
      })
    )
    .pipe(footer('\n'))
    .on('error', console.error.bind(console))
    .pipe(gulp.dest('./'))
}

// default watch function
exports.default = function() {
livereload.listen();
  gulp.watch(
    ['./**/*.twig','tailwind.config.js','./**/*.php', './src/css/*.css'],
    gulp.series(css)
  )
}

Thanks so much Gulp, Tailwind, Timber, Wordpress crew!