Tailwind CSS is a mobile first, utility CSS framework which will vastly increase productivity while implementing designs in your web app or website.

A small DX improvement I make in my Tailwind projects, which I’m describing as a “default first” approach (this is a semi-joke derived from mobile first).

It revolves around targeting styles for mobile. The Tailwind docs specify:

Image for post
Image for post
https://tailwindcss.com/docs/responsive-design

If you’d like to apply a utility at one breakpoint only, the solution is to undo that utility at larger sizes by adding another utility that counteracts it.

This is a small DX annoyance for me, why should I have to apply something only to reset it later? …


Laravel Blueprint is a wonderful tool that helps scaffold Laravel apps in the early stage of development.

It uses a simple YAML format, like the below:

Then run php artisan blueprint:trace and the models, migrations, factories, Nova resources will all be generated.

This saves a lot of time, but once it has been generated once, they can’t be generated again for fear of overwriting changes that have been made in developing the application.

A technique I’ve been using is to separate the generated model code and the model behaviour into a separate trait.

To achieve this, I’ve created a custom ModelGenerator which extends the original ModelGenerator, and if a behaviour for the model exists, it will inject the trait into the generated model class. …


This is a matter of personal preference, it basically means that if you have a file, say app/Services/Calculator.php and you wanted to write a test for this class, instead of hiding the test away in a tests/Unit/Services/CalculatorTest.php file, you would put the test right next to what it is testing, in app/Services/SubscriptionCalculatorTest.php

This approach has a few benefits:

  • Switching between implementation and tests is easier
  • Easily see which classes have tests without relying on code coverage tools
  • Remembering to update tests when refactoring

The approach has been championed by a few popular frameworks in the JS world — Angular, RedwoodJS, FoalTS, NestJS but for some reason, hasn’t really made its way into PHP. …


Image for post
Image for post

Heroku provides a good base level guide to get a Laravel running on its platform, however, it really stops at the bare minimum.

We’ve got 10+ (micro-ish) services running in production on Heroku and over the years we’ve fine tuned our setup to ensure that these apps are performant and our DevOps is as seamless as possible.

There’s a bit of scope, so we’ll break it down into key areas. Follow along in the app’s lifecycle:

  • When an app is provisioned
  • When an app is built
  • When an app is released
  • When an app is released for the FIRST time
  • When an app is…

I think point 3 of the 12 factor app is one of the most important and easily achievable factors to achieve.

Frameworks like Laravel encourages this behaviour out of the box, with the loading of the .env file and the config directory for the different services the application might do. This file is not committed to the repository as it contains super secret stuff, so a .env.example is provided to assist developers when setting up the application on their local computer or deploying to servers.

However, I feel the process could be improved, especially when adding new environment variables to an existing application, I often find myself running into the following…


Every developer loves to hate WordPress, and they have good reason to! It’s built on PHP which has its many flaws and does not follow any modern software architectures.

However, there’s no denying the popularity of the “platform”, it powers 20% of the internet and as such there is a HUGE market for developers that can develop on the WordPress platform. It’s cost effective and probably the best content editing experience for clients. Clients being the key word here.

As such, I’m torn between the market and using modern software techniques. So, I’ve tried to combine the two :)

What I’ve developed is an extremely flexible component based WordPress content editing experience, built on a “single file” architecture inspired by Vue. …


If you have state that can be stored in the URI, I highly suggest you store it there, because:

  • It’s understandable by the user
  • The user can easily change it
  • It can be easily shared
  • It can be easily saved / bookmarked
  • It’s had “Time Travel” since the first browser
  • Normal users can time travel through their state (no devtools)

If you authenticate with Firebase in your app, authenticating with your API is very easy, as the Firebase token is a JWT.

All we really need to is implement a Guard with a user function that returns an Authenticatable object.

Because our user is actually stored in the JWT token, we can completely skip the custom User Provider class, as we can simply return an Authenticable object directly from our Guard.

Step 1: Configure Laravel to use our custom guard in config/auth.php

Step 2: Add our custom guard to the Auth manager

Step 3: Add some dependencies

Run composer require kreait/firebase-tokens to add the library which will verify our tokens for us. Then tell Laravel how to create our token…


Zeplin is a cool web app / desktop app where you can upload your Sketch / Photoshop / XD designs and it can generate the CSS for you. This greatly speeds up the “cut up” process of turning designs into HTML and CSS.

Tailwind CSS is a utility CSS framework, that allows you to apply utility classes to rapidly achieve a custom design without repeating CSS over and over again. Because semantics are semantics and I prefer a better developer experience. I’m much happier now :)

While the CSS Zeplin spits out is good, it includes everything so if you simply copy and past all your components into your main.css, you could get the job done quickly but with a large and WET CSS file. …


Tailwind is a utility CSS framework which allows you rapidly build custom user interfaces. Custom being the keyword here.

If I’m building an admin / app / mvp / prototype I whip out the latest Bulma and start building my UI as quickly and efficiently as possible. However, sometimes we have to build to a design, which may not align with a UI Kit like Framework7, Bulma or bootstrap.

Tailwind, does not make any assumptions about you design, so you essentially start from scratch, but can rapidly achieve custom designs with utility classes.

I followed many articles on how to use Tailwind. Even though I was using .postcssrc.js, the @tailwind rules were not being processed by PostCSS. …

About

Craig Morris

Solutions Architect. Technical Lead. Full-stack Developer. http://craigmorris.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store