Setting up TailwindCSS in a Laravel project
Make sure Composer and npm are installed before you begin! (Note: If you prefer using SASS or LESS, the below tutorial may not be applicable.)
If you haven't set up Laravel yet, follow the steps below. Otherwise, skip these two steps.
- Run
composer global require laravel/installer
- From command line,
cd
into the directory you want to install Laravel in and runlaravel new myProjectName
. A folder titledmyProjectName
will be created with Laravel installed in it.
Install Laravel dependencies
Navigate to your project's root folder (cd myProjectName
) and run:
npm install
npm install tailwindcss
Then run:
cd resources
mkdir css
The above commands will create a folder named css
in resources
.
In resources/css
, create a file named tw.css
(or whatever name you prefer - just be sure to substitute your file's name for tw.css
in this tutorial). This file will contain your uncompiled Tailwind CSS. Here, you can add @tailwind base;
, @tailwind components;
, @tailwind utilities;
, etc.
Next, navigate to webpack.config.js
in your project's root folder. Add the following code snippet:
mix.postCss('resources/css/tw.css', 'public/css', [
require('tailwindcss'),
])
.js('resources/js/app.js', 'public/js')
Run npm run dev
. After Laravel Mix has finished building successfully, you should have a file in public/css
containing built Tailwind CSS. To link to this asset in your project, add the following code:
<link href = {{ asset('css/tw.css') }} rel = "stylesheet" />
Now you should be all set to go. Happy coding!