Configuring new Laravel application with TailwindCSS

Have you heard of Tailwind and you still havent tried it in your applications?

Tailwind is something that you have to adopt in your daily coding. It will make writing CSS like a breeze. Not only it will speed up your design development, but it will also make you a better UI designer.

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This is how they described Tailwind. Its not like any other CSS framework available (Bootstap, Bulma, ...), it doesnt have any predefined components, but instead you build every component on your own. Sounds difficult right? Its not. If you have your website to have its own identity, and not look like any other bootstrap based website online - use Tailwind.

Setting up Tailwind for Laravel is simple. Using your terminal, craft a new Laravel application using $laravel new <app_name> command. Then, enter the directory using cd <app_name>, and run composer install. After composer did its thing, using yarn install node modules yarn. After that is done, install tailwind using yarn add tailwindcss.

After that, run ./node_modules/.bin/tailwind init to init a configuration file for tailwind. You can configure the colors, modules, and other stuff for tailwind in tailwind.js file that was generated for you (dont over think about this right now, you will learn how to customize tailwind to fit your needs after you play with it for a while).

In your main .scss file, add these two lines at the beginning:

@tailwind preflight
@tailwind utilities

Open webpack.min.js and add this line to the top of the file

let tailwindcss = require('tailwindcss');

And lastly, append to the .scss() function this postCSS method:

      processCssUrls: false,
      postCss: [tailwindcss('./tailwind.js')],

Now, run yarn run dev and you can start using Tailwind in your Laravel application! You can read more about how to use tailwind in their website. Their documentation is amazing.

We are going to explore more about Tailwind and Laravel in the upcoming days!