In this tutorial we are going to install Tailwindcss in Laravel 7 application. Tailwindcss is a utility-first CSS framework. With this framework you can make custom designs without writing any CSS. Install Tailwindcss in Laravel 7 Now it is time to install Tailwindcss! Installing Tailwindcss is not difficult. First, we create a new Laravel project by running the Laravel new <project name> command. Then we are going to install Tailwindcss via npm. Open a terminal and run the following command: npm install tailwindcss. Then we are going to add tailwind to our resources/sass/app.scss file. Tailwind config The next step is to generate the Tailwind config file. We generate the file by running npx tailwindcss init. This command will create a minimal tailwind.config.js file at the root of the project. Click here if you want more information on this topic. Laravel Mix Now we have to setup Tailwindcss in Laravel Mix. Open webpack.mix.js from the root directory and change the content with the following: Testing Now we can use the Tailwindcss classes. Open the welcome.blade.php file, delete everything and add the following code: The last step is to run the following commands: npm run watch & php artisan serve. The first command will compile all the assets. The second command will start the Laravel server. If everything went well, you should see the following output: That’s it! Now you can start creating beautiful designs with Tailwindcss. Learn more about Tailwindcss Adam Wathan is the founder of Tailwindcss and has a YouTube Channel with lots of tutorials on Tailwindcss. Adam recreate designs of existing websites what is nice. GitHub In this repository you can find the source code for this tutorial. If you have any questions, feel free to ask!
Hello everybody! Today I want to share a little guide with you that describes how to install Font Awesome in a Laravel project. Currently I am working on a website for this blog (I will tell you more about it soon). For this project I am using the following stack: Laravel Vuejs components Tailwindcss I am using Tailwindcss for the styling of the website. I really like the css framework, but one drawback is the lack of an icon pack. Before I start using Tailwindcss I was using Bootstrap. Bootstrap ships with Font Awesome out of the box. I like the simplicity of the use of icons. With this simple html tag, you have a nice user icon. Installation in Laravel with npm I wanted Font Awesome in my Laravel project, but the installation was a little bit harder than I was expecting. There was not much documentation on this topic, that’s why I am writing this guide. The first step is to install Font Awesome with npm. The next step is to include the Font Awesome css in the app.scss file at the top. This is where I struggled with the installatoin. I thought that it would work right now. So, I added the html class to my design. But it didn’t work… After a long research on the web I saw this post on laracast.com. The only thing we must do is add the following line of code to the webpack.mix.js file. That’s it! Now you can use the Font Awesome icons in your project. Roundup I hope you enjoyed this small post. If you want to see more, please subscribe. Follow me also on Twitter 😎.