Getting started with Laravel and Tailwind

Author:Devin Pearson

For those of you who don't know, Tailwind is a new CSS framework developed by Adam Wathan and Steve Schoger - the authors of Refactoring UI. The framework is utility-first, which means that ut enables you to build CSS designs and custom user interfaces without having to worry about bespoke, opinionated styles. The beauty of this is that it doesn't impose a design specification, which you would have to override to build your design. Instead, you can bring in a wealth of components and merge them together to create a unique design and user experience.

Let's start with a fresh copy of Laravel. Assuming you have Composer installed, navigate to where you would like to store your project and run the following command, which installs the latest stable release of Laravel with the name specified. In this case, it is "tailwind-boilerplate".

composer create-project --prefer-dist laravel/laravel tailwind-boilerplate

The required packages will download and install, as well as set up the environment files and generates your application key for you. This process might take a few minutes.

Now we have our fresh copy of Laravel. Let's see what it looks like when using "artisan serve" command. This command serves the site over localhost port 8000.

cd tailwind-boilerplatephp artisan serve

Paste this into your browser URL bar, and it should display you the following.

Perfect, we have a working Laravel site we can now use to add Tailwind too.

To cancel the serving of the site, you can press CTRL + C on both Mac and Windows.

Next, we start bringing in the necessary pieces for Tailwind by first installing the node tailwind package.

npm install tailwindcss

Once Tailwind is installed, we can generate its config file. The config file is useful if you want to create custom modules or use tailwindui.

npx tailwindcss init

Update your webpack file to timport the Tailwind and its config file when we compile, using the following code.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');

const tailwindcss = require('tailwindcss');

mix.sass('resources/sass/app.scss', 'public/css')
        processCssUrls: false,
        postCss: [ tailwindcss('tailwind.config.js') ],

Next, you need to do three imports in your resources/sass/app.css file that bring in tailwinds styling objects.

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

Run "npm run dev" to compile the js and css with all the tailwind updates.

We also need to include the link in your templates.

<link rel="stylesheet" href="/css/app.css">

And that's it, you're done! Tailwind is now available, and you can easily use its many features within your views.

Devin Pearson

Lead Software Architect

© 2020 TechnoPonies (Pty) Ltd. All rights reserved.