Setting Up Tailwind CSS with Laravel

Posted Nov 21st, 2017
« Back to All Posts

While building this website (and associated CMS features), an important decision I had to make was what to use for a frontend framework. Even though I'll be building most of the site's functionality from scratch, automating some of the CSS workload will seriously improve my overall productivity. After looking at a few options (including Bootstrap 4), I've decided to use Tailwind CSS, an exciting new project from @adamwathan, @steveschoger, @reinink and @davidhemphill. Tailwind employs a different way of thinking about CSS and components, and the "from scratch" nature of the framework fits right in with my vision for this project. So let's dive in!

Update: Michael Dyrynda has provided an excellent frontend preset to speed things up (thanks dude!)

Installing Tailwind in a Laravel project was pretty straightforward, here's what I did: Note that the tailwind docs outline this exact same process

  • Add tailwind as a npm dependency, then run its utility to create a tailwind.js config file in your project's root
    $ npm i tailwindcss
    $ ./node_modules/.bin/tailwind init
  • Add tailwind to the webpack.mix.js file, which should look like:
    let mix = require('laravel-mix');
    let tailwindcss = require('tailwindcss');
    mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.js') ],
        processCssUrls: false, // This is required when using laravel mix
    });
  • Replace the contents of resources/assets/sass/app.scss with this:
    @tailwind preflight;
    // Add your extracted components here
    @tailwind utilities;
    // Add your own utilities here
  • Finally, build the assets with Laravel Mix:
    npm run dev

Now you should see the tailwind classes in the generated public/css/app.css file! From here, you can start creating your design. If your app is using Laravel and its authentication scaffolding, you'll need to rip out the bootstrap styling and classes in the template. Chances are you'll find the adding new utilities and extracting components pages really helpful. Have fun!


Edit: Although it is a great way to learn Tailwind CSS, if you want to skip editing the login / register pages to convert them to tailwind syntax, just use Michael Dyrynda's Tailwind Preset instead

Copyright © 2017 Austen Cameron, all rights reserved