This tutorial will guide you on how to install Laravel on windows so you can begin to develop and create websites with the framework. Additionally, we will also install Tailwind, a super easy to use CSS framework.

Requirements

Laravel uses Composer to manage all of its dependencies, to download Composer click here, or use our tutorial on installing Composer on Windows.

Installing

With Composer installed open your command line and run the following command. It will install Laravel globally on your computer and also add itself to the path.

composer global require laravel/installer

Testing it works

Now we will quickly check it has installed correctly. Create or navigate to a folder for testing and open it within the command line.

laravel new testApp
cd testApp
php artisan serve

You should now be able to see in your browser the default Laravel Page. Congratulations you have successfully installed Laravel, now have fun making something brilliant.

Installing Tailwind on Laravel

Requirements

Installing Tailwind requires NPM you can download that here, or follow our tutorial here.

Installation

Tailwind is a super easy-to-use CSS framework, if you wish to use it with Laravel you will need to follow the steps below on each new project you start.

First of all, make sure you are within a Laravel project or are in the test folder from above. You can then run the installation command.

npm install -D tailwindcss postcss autoprefixer

This installs Tailwind. Next, we initialise Tailwind within the project and generate its config files.

npm tailwindcss init

Now we need to add Tailwind to the Mix config file. Open the file called webpack.mix.js and add tailwindcss as a plugin.

Next, we add our blade templates to the tailwind.config.js file. We are adding all possible templates even if we do not necessarily use all of them in the project e.g. Vue.js.

Finally, we can add the directives to our projects /resources/css/app.css file.

To have your app update the CSS as you develop you can run.

npm run watch

Optionally you can have all the CSS preloaded during development.

npm run dev

When you are ready to release for production you can run the following command to have only the CSS you require for your project within app.css.

npm run prod

This concludes the tutorial on how to install Laravel and Tailwind, go forward and create something amazing!