Laravel 10 Tailwind Css

suraj-repositories

Use of tailwind CSS in Laravel 10. with few tip's and trick's.

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.

Download

laravel-10-tailwind-css

Answer of "How to use tailwind css with laravel 10?"

documentation link : Tailwind with laravel 10
Extension to help you out : Tailwind CSS IntelliSense (vs code)
Flowbite : A website which provides simplified use of tailwind by providing components such as - buttons, card, modal, popover etc.

Steps -

Step 1 : Install tailwindcss and its peer dependencies via npm
```
npm install -D tailwindcss postcss autoprefixer
```
Step 2 : run the init command to generate both tailwind.config.js and postcss.config.js.
```
npx tailwindcss init -p
```

Step 3 : Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
content: [
  "./resources/**/*.blade.php",        // for blade files
  "./resources/**/*.js",               // for single page applications
],
theme: {
  extend: {},
},
plugins: [],
}

Step 4 : Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Step 5 : Run your build process with npm run dev : This command will start the development server and you can see your changes on the runing laravel web application
```
npm run dev
```

Step 6 : Start using Tailwind in your project -
Make sure your compiled CSS is included in the <head> then start using Tailwind’s utility classes to style your content. resources\views\welcome.blade.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
</head>
<body>
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
</body>
</html>

Step 7 : start the laravel server
```
php artisan serve
```
Step 8 : Now you can directly see your changes on the web -- There is one last step needed - when you are happy with your changes - commit them
Actually you need to run build for your application which saves the changes - If you don't do this step after completion the chages will not reflect if you stop you npm server
To build your app
```
npm run build
```

Further steps

In between for some reason your changes are not reflecting to your web application use the following command to clear your cache and optimize your application
```
php artisan cache:clear
php artisan optimize
```
When download this project
when you download this project you have to install all the vendor libs for your project. you can do this by using the following command
```
composer install
```

⭐️ Star my repository if you find it helpful.

Top categories

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.

Laravel 10 Tailwind Css

Need a Tailwind website built?

laravel-10-tailwind-css

Steps -

Further steps

When download this project

Top categories

Need a Tailwind website built?