Replace Bootstrap with Tailwind CSS in Laravel

I assume that you have a working Laravel site up and running with Bootstrap CSS and some custom imported stylesheets. In this article we will replace the Bootstrap CSS with Tailwind CSS.

I have build www.cryptomonitor.me completely with Bootstrap CSS including components like bootstrap-select.js. I love Bootstrap but I wanted to be more flexible in styling. Tailwind is a utility-first CSS Framework. By adding simple words to the classes in HTML you define styling. The responsiveness is very powerful.

First open /resources/js/bootstrap.js and remove the following line if it is there:

require('bootstrap');

This will make sure you have disabled Bootstrap CSS.

Install Tailwind CSS

Open a terminal and run the following command to add Tailwind CSS to your project:

npm install tailwindcss

This will add Tailwind CSS to your project. You can find this package in the /node_modules/tailwindcss folder. It is only added to your Laravel project folder but it is not implemented yet. We need to ‘call’ the package when Laravel runs. Therefor we need to implement it in out Laravel SASS file. Open /resources/sass/app.scss and replace the following default lines::

// Fonts
@import url('https://fonts.googleapis.com/css?family=Jura|Ubuntu');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

with the following lines:

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

These three lines will implement the Tailwind Base, Components and Utilities inside Laravel. Next thing is to create a Tailwind config file in the root of your project. Go back to your terminal and execute the following command;

npx tailwind init
CREATED TAILWIND CONFIG FILE

If you open this file you will see a default config like:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Compile with Laravel Mix

The last thing we need to do is to add the Tailwind CSS Module to Webpack with Laravel Mix.

Webpack is a module bundler which can combine all sorts of modules and their dependencies together into single files. For example: It can combine all your javascript files and modules together in 1 JS file. The same thing can be done for stylesheets.

Laravel Mix is an API to define logical steps how Webpack should compile the assets into one file and where to place the output.

Open the Laravel Mix configuration file ‘webpack.mix.js’ from the root of your project. It should look like:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

Replace this information with the following lines:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

Let’s start the compile by executing the following commands:

npm install 
npm run dev

‘npm install’ will install all the needed dependencies that are defined in ‘package.json’. This file is the same principle like composer.json. Also a package manager but then for php and not for node (javascript)

‘npm run dev’ is starting the mix task and processes. The ‘dev’ argument is compiling with development output. If you want less output use ‘npm run production’.

NPM RUN DEV

Add style to main page

The last thing we need to do is to load the new compiled css file in your main blade file. Open your welcome.blade.php and add the following stylesheet to the header:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Leave a comment

Your email address will not be published. Required fields are marked *