Tailwind 2.x recommends using PostCSS for its preprocessor. However, if you still want to use Sass the documentation isn’t the clearest on how to set it up.

There is a page but it doesn’t seem to give you the step by step breakdown needed - here document whats needed to use Sass with Tailwind 2.x and Laravel-Mix.

First rename the resources/css/app.css file to use the scss extension:

mv resources/css/app.css resources/css/app.scss

Next remove the default postCss config within the webpack.mix.js config file:

// snip...
mix.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer')
])

Now add the tailwind module and use the sass plugin and configure postCss to use the tailwind.config.js file:

const tailwindcss = require('tailwindcss')
// snip...
mix.sass('resources/css/app.scss', 'public/css')
    .options({ postCss: [ tailwindcss('./tailwind.config.js')]})

Thats it!

When you run npm run dev the needed sass and other js dependencies will be detected as missing and automatically installed.

Continue reading

Introduction

Laravel apps read sensitive information from their .env file.

Recently I found out that Laravel Mix can pass values from the same .env file to the js portion of your app as long as they are prefixed with MIX_

I use Gitlab ci pipelines to build production assets so that I dont need that additional tooling on the production servers the main one being:

  • yarn run production

This is preceded with cp .env.example .env meaning when the build commands are being run, they are going to use values from the .example.env file.

If your project doesn’t make use of anything from the .env file then this is totally fine, however in scenarios where you do, since production applications will almost certainly have different .env values to those in the .example.env file (Never commit credentials to source control!) the resulting file will have been built with the wrong credentials.

In this article I’m going to show how you can use gitlab CI to build those assets with updated environmental variables so that they function as expected when deployed to your production servers.

Continue reading

I’m always looking for easy wins to optimise my development workflow and improve the end user experience, so figured after hearing about Purgecss I’d look into it and see how I could integrate it into my work flow.

“Purgecss is a tool to remove unused CSS”

With frameworks like Bootstrap and Zurb providing so many CSS classes that often don’t get used, this looked like it really would be an easy win situation!

Continue reading

Earlier this year I blogged about reducing the file size of moment.js by stripping out additional locales. Whilst stripping the locales made a good saving in file size, really all I was using it for was to format dates within my user interfaces. So I set out on finding a lightweight alternative to do just that…

Continue reading

The PHP library Carbon is hands down my favourite way to work with dates within PHP.
When using Javascript the closes thing ive found to it is a library called Moment.js.

By default Moment.js is bundled with a plethora of locales which might not all be relavent to you or your users. In this article I want to look at how much of a size reduction we can use by stripping out unwanted locales using webpack via Laravel-Mix.

Continue reading

Introduction

My latest projects at work have evolved from being PHP / Laravel applications with sprinklings of Vue JS on the front end to being almost entirely Vue JS components driving the frontend with Laravel backends.

Whilst laravel ships with Laravel-Mix to make webpack / asset compilation easier it doesn’t ship with anyway to lint your javascript.

Luckily adding eslint and defining rules for your .js and .vue files to follow is pretty straight forward.

Continue reading
  • page 1 of 1
Author's picture

Talv Bansal

Full Stack Developer, Part Time Photographer


Head of Software Engineering


Remote