Install Custom Design Files On Laravel - FreeCodeBlog

Sometimes you may want to install your designed (font-end) files bootstrap, tailwind css, custom css, custom js on laravel. so let's start to read this tutorial to see how we can use custom files on laravel.

You need to design (font-end) part before continue next step. You can easily design font-end part using bootstrap, tailwind css, custom css. make ready css, js, html, fonts, images files to use on laravel.

1. Laravel To Install Custom Design Files.

Let's install laravel to use custom design files. I already install laravel latest version. If you don't know to install laravel then please read how to install any kind of laravel version tutorial.

2. Custom Css Files On Laravel.

I will recommend you to use your custom css files in resources css files. You have to knowledge about laravel mix to use laravel resources css files. If you don't know to use laravel mix then read laravel mix complete tutorial.

Public Css: Copy your custom font-end design css files and paste it on laravel project public folder.

Resources Css: You can also paste your custom css files on laravel resources css files. Use font-end package information in resources css files if you have used bootstrap, tailwind css, others.

/**
 * Tailwind css packages import in laravel resource css files
*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/**
 * Don't forget to add tailwind css packages in package.json file
*/
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"tailwindcss": "^2.0.1",

3. Custom Js Files On Laravel.

Public Js: Copy your custom font-end design js files and paste it on laravel project public folder.

Resources Js: You can also use your custom js files on laravel resources js files.

Thanks.