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!
Top comments (9)
Nice tutorial! Thanks for sharing!
Just noticed a small typo:
wepback.config.js
should bewebpack.config.js
Thank you for pointing out the typo! The article has been updated. :) Glad you enjoyed it!
Hello, the link tag is wrong. it should be href and not src
Thanks for pointing that out! I've updated the example.
I just released RunCSS which is a runtime version of TailwindCSS. See here: dev.to/mudgen/runcss-a-runtime-ver...
I am interested in your thoughts about it.
i tried this way. But it's only generating app.js file instead of app.css!
Try the code below in your
webpack.config.js
and let me know if it works.It seems like my nodejs problem. It's working on another PC.
in my PC: dev-to-uploads.s3.amazonaws.com/i/...
another PC with the same config with version: dev-to-uploads.s3.amazonaws.com/i/...
Ahh, okay! That's really strange. I'm glad you figured it out, though!