In this tutorial we are going to install Tailwindcss in Laravel 7 application. Tailwindcss is a utility-first CSS framework. With this framework you can make custom designs without writing any CSS.
Install Tailwindcss in Laravel 7
Now it is time to install Tailwindcss! Installing Tailwindcss is not difficult.
First, we create a new Laravel project by running the Laravel new <project name> command.
Then we are going to install Tailwindcss via npm. Open a terminal and run the following command: npm install tailwindcss. Then we are going to add tailwind to our resources/sass/app.scss file.
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";Tailwind config
The next step is to generate the Tailwind config file. We generate the file by running npx tailwindcss init. This command will create a minimal tailwind.config.js file at the root of the project. Click here if you want more information on this topic.
Laravel Mix
Now we have to setup Tailwindcss in Laravel Mix. Open webpack.mix.js from the root directory and change the content with the following:
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') ],
});Testing
Now we can use the Tailwindcss classes. Open the welcome.blade.php file, delete everything and add the following code:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-orange-500">
<h1 class="text-4xl text-center font-bolder text-white">Welcome to Laravel with Tailwindcss!!</h1>
</body>
</html>The last step is to run the following commands: npm run watch & php artisan serve. The first command will compile all the assets. The second command will start the Laravel server.
If everything went well, you should see the following output:
That’s it! Now you can start creating beautiful designs with Tailwindcss.
Learn more about Tailwindcss
Adam Wathan is the founder of Tailwindcss and has a YouTube Channel with lots of tutorials on Tailwindcss. Adam recreate designs of existing websites what is nice.
GitHub
In this repository you can find the source code for this tutorial. If you have any questions, feel free to ask!