DEV Community

Catherine Chen
Catherine Chen

Posted on • Edited on

6 1

Setting up TailwindCSS in 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.

  1. Run composer global require laravel/installer
  2. From command line, cd into the directory you want to install Laravel in and run laravel new myProjectName. A folder titled myProjectName 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
Enter fullscreen mode Exit fullscreen mode

Then run:

cd resources
mkdir css
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Now you should be all set to go. Happy coding!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (9)

Collapse
 
bobbyiliev profile image
Bobby Iliev

Nice tutorial! Thanks for sharing!

Just noticed a small typo: wepback.config.js should be webpack.config.js

Collapse
 
cathzchen profile image
Catherine Chen

Thank you for pointing out the typo! The article has been updated. :) Glad you enjoyed it!

Collapse
 
hugo1707 profile image
hugo1707

Hello, the link tag is wrong. it should be href and not src

Collapse
 
cathzchen profile image
Catherine Chen

Thanks for pointing that out! I've updated the example.

Collapse
 
mudgen profile image
Nick Mudge

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.

Collapse
 
nokibrokes profile image
Ariful Mowla

i tried this way. But it's only generating app.js file instead of app.css!

Collapse
 
cathzchen profile image
Catherine Chen • Edited

Try the code below in your webpack.config.js and let me know if it works.

mix.css('resources/css/app.css', 'public/css')   // replace with sass if using sass
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss() ],
    })
    .js('resources/js/app.js', 'public/js');    // remove if you don't need js
Collapse
 
nokibrokes profile image
Ariful Mowla • Edited

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/...

Thread Thread
 
cathzchen profile image
Catherine Chen

Ahh, okay! That's really strange. I'm glad you figured it out, though!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay