# Setting up TailwindCSS in a Laravel project

Make sure [Composer](https://getcomposer.org/) and [npm](https://www.npmjs.com/get-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:

```diff
npm install 
npm install tailwindcss
```

Then run:

```diff
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:

```diff
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:

```diff
<link href = {{ asset('css/tw.css') }} rel = "stylesheet" />
```

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