Here at Three29 we very often reach out to two of the most widely used frameworks by Web Developers out there: Laravel and TailwindCSS. In this guide, we’ll outline a few easy steps to start your new Laravel app and customize the UI using TailwindCSS.
1. Let’s start by creating a fresh Laravel app. While there are many ways to create a fresh Laravel project, we’ll be using the Laravel Installer package down below (feel free to use whichever method you prefer the most):
# change directory to a folder of your choice where all your projects live
cd ~/dev
# create a new laravel project. We'll call it "larawind"
laravel new larawind
# change directory into the newly created project
cd larawind
# preview it in the browser
php artisan serve
> Starting Laravel development server: http://127.0.0.1:8000As a result, you should see a very basic home page which in fact displays the contents of the welcome.blade.php view file.
2. Next we can either choose to pull in the TailwindCSS npm package ourselves, or we can use Laravel Breeze (since you’re most likely need authentication scaffolding anyways).
composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run devLaravel Breeze will take care of the following for us:
a) update package.json to require the necessary dev dependencies (the version of the npm packages listed below may be different for you by the time you read this, but that’s okay);
{
// BEFORE
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
}
}{
// AFTER
"devDependencies": {
"@tailwindcss/forms": "^0.2.1",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.1.0",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.2"
}
}b) update the webpack.mix.js file to add support for TailwindCSS;
// BEFORE
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);// AFTER
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);c) update your resources/css/app.css and import TailwindCSS in there:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';d) create a tailwind.config.js file for you.
3. At this point we are ready to start using TailwindCSS utility classes in our templates. Let’s change the welcome.blade.php view file to use the following contents:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Larawind</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body class="antialiased">
<div class="relative flex items-center justify-center min-h-screen bg-gray-800">
<img
src="https://three29.t29dev.com/wp-content/themes/three29/images/t29-logo-seafoam.svg"
alt="Three29 Logo"
class="h-32 animate-bounce"
>
</div>
</body>
</html>Refresh your browser’s page and you should see the following result:
4. Laravel Mix ships with Browsersync support out of the box, so let’s make use of this and have the browser refresh the page for us as soon as we change a CSS, JS, or View file. All you need to do is to add the following code snippet at the end of your webpack.mix.js file:
mix.browserSync({
proxy: "127.0.0.1:8000",
files: ["public/css/*.css", "public/js/*.js", "resources/views/**/*"]
});At this point simply run npm run watch in your terminal and start watching for file changes and have the browser auto-reload the page for you. Something like this:
5. In v2.1, TailwindCSS introduced a new just-in-time compiler (JIT Mode) that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time. While the JIT compiler comes with many great advantages, “Lightning-fast build times” and the ability to “Generate arbitrary styles without writing custom CSS” are my favorites 🔥.
All we need to do to enable JIT mode in our project is to add mode: 'jit' inside our tailwind.config.js file like so:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('@tailwindcss/forms')],
};If before enabling JIT, the initial built time in development mode was around 5.4s and the final app.css file had a size of ~3.8MB, then with JIT enabled, the initial built time reduced to 1s (subsequent built times are even faster) and app.css size to ~30.6KB. Crazy right?! 😮
6. Lastly, if you want to have a better experience using TailwindCSS inside your code editor, I definitely recommend making use of the existing plugins/extensions available for your editor of choice.
I personally use Tailwind CSS IntelliSense VSCode extension. It does really help a lot with autocompleting utility classes as well as giving information about a given CSS class.
If you’re using one of the JetBrains IDEs, they do have support for Tailwind CSS as well.
That’s it for today, and congrats if you made it this far! Happy coding! 👨💻 👩💻
Photo by Jason Blackeye on Unsplash.
