Are you a backend developer diving into the world of frontend styling or vice versa, feeling a bit hesitant about Tailwindcss? Fear not! This guide is your companion in seamlessly integrating TailwindCSS into your Laravel projects, with a sprinkle of fun along the way.

Let’s embark on this adventure step by step, starting with the creation of a Laravel project. Open your terminal, navigate to your preferred directory and type:

composer create-project laravel/laravel my-project
cd my-project

With the above done, you’ve successfully created your Laravel project. Now, let’s spice up your front end with TailwindCSS magic.

Installing TailwindCSS

First, we’ll install TailwindCSS using npm (node package manager). Ensure you have Node.js and npm installed on your machine.

If you don’t have Node and npm installed, you can go to https://nodejs.org/en (node) and https://www.npmjs.com/package/npm for downloads and installation.

After that, run the following commands to install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Locate the tailwind.config.js file in your project and add the paths to all of your template files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adding Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.

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

Commence your build process

Run your build process with npm run dev.

Start using Tailwind in your project

Make sure that the app.css file in the resource folder is included in the <head> then start using Tailwind’s utility classes to style your content.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

With this setup, you can start building your Laravel application using Tailwind for your styling.

Laravel UI

As backend developers, we adore efficiency. Laravel UI simplifies the authentication process by generating the required views. Execute the following command to install it:

composer require laravel/ui
php artisan ui vue --auth

Voila! Laravel UI has crafted authentication blades for you, saving you precious time and effort.

Integration with Laravel Mix for Deployment

Now comes the fun part! Utilize Laravel Mix to compile your assets. You can check out laravel mix here — https://laravel-mix.com/docs/6.0/what-is-mix.

To use Laravel mix compilation, you will need to install it in your project using this command:

npm install laravel-mix --save-dev

Next, create a Mix configuration file within the root of your project.

touch webpack.mix.js

Open your webpack.mix.js file and incorporate TailwindCSS:

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

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

With this Laravel mix setup, you can run the following command to compile your assets for deployment:

npm run build

This command will generate a build folder in your public folder. The styles file inside the build folder would contain the compiled tailwind styles.

However, if you are using Laravel-ui or you installed it in your project, the compiled CSS file would contain bootstrap styles instead of tailwind styles.

To correct that, you would need to go to the ./resources/sass/app.scss file. The file would look like this;

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

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

To compile tailwind styles for deployment, we would need to update the imports to this:

// Fonts - you can change it to your preferred font
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

// TailwindCSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Voila! This is all we need to do. And with this, we can run the command below to generate the right CSS file in the build folder (eg. public/build/asset/app-87as651.css):

npm run build

The CSS file can be renamed (eg. app.) and used to replace this @vite(‘resources/css/app.css’) at the head section of your blade with this:

!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- adding the compiled css file -->
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  <!-- If you renamed the CSS file to app.css and copied 
  into the CSS folder in the public folder -->
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

And there you have it! Your application is now ready for deployment.

Conclusion

TailwindCSS’s utility-first approach aligns beautifully with our penchant for efficiency and functionality. It offers an array of pre-defined classes that simplify styling, streamlining the frontend development process. So, as a backend developer embracing TailwindCSS, you’re not just integrating styles; you’re harmonizing the backend and frontend realms, creating a cohesive and visually appealing user experience.

Omemgboji Emmanuel