--- title: "Install Tailwind CSS in Laravel" description: "Integrating Tailwind CSS with Laravel enhances your web application's styling capabilities and revolutionizes how you approach UI development. Tailwind CSS is a utility-first CSS framework that..." url: https://www.inmotionhosting.com/support/edu/laravel/install-tailwind-css-in-laravel/ date: 2024-02-21 modified: 2024-05-10 author: "Derrell" image: https://www.inmotionhosting.com/support/wp-content/uploads/2024/02/tailwind-laravel-1.png categories: ["Laravel"] type: post lang: en --- # Install Tailwind CSS in Laravel ![Install Tailwind CSS in Laravel](https://www.inmotionhosting.com/support/wp-content/uploads/2024/02/tailwind-laravel-1-1024x538.png) Integrating [Tailwind CSS](https://tailwindcss.com) with Laravel enhances your web application’s styling capabilities and revolutionizes how you approach UI development. Tailwind CSS is a utility-first CSS framework that allows developers to style their applications directly within their HTML markup. By providing a vast array of utility classes, Tailwind enables rapid UI development, making it easier to implement custom designs without leaving your HTML. This approach encourages a more efficient and flexible way of building interfaces, reducing the need to write custom CSS. Boost your Laravel apps with our specialized [Laravel Hosting](https://www.inmotionhosting.com/laravel-hosting). Experience faster speeds for your Laravel applications and websites thanks to NVMe storage, server protection, dedicated resources, and optimization tools. ![check mark](https://design.inmotionhosting.com/assets/icons/standard/check-blue.svg)99.99% Uptime ![check mark](https://design.inmotionhosting.com/assets/icons/standard/check-blue.svg)Free SSL ![check mark](https://design.inmotionhosting.com/assets/icons/standard/check-blue.svg)Dedicated IP Address ![check mark](https://design.inmotionhosting.com/assets/icons/standard/check-blue.svg)Developer Tools [Laravel Hosting](https://www.inmotionhosting.com/laravel-hosting) ## Prerequisites - [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com) installed ## Step 1: Navigate to your Laravel Project Directory Start by navigating to your Laravel project’s directory. ``` cd my-laravel-project ``` If you don’t have a project set up already, you can use [Composer](https://www.inmotionhosting.com/support/edu/laravel/how-to-install-laravel/) or [Softaculous](https://www.inmotionhosting.com/support/edu/laravel/install-laravel-softaculous/) to install Laravel. ## Step 2: Install Tailwind CSS Now install Tailwind CSS through npm. Open your terminal, navigate to your Laravel project directory, and run the following command: ``` npm install tailwindcss@latest postcss@latest autoprefixer@latest ``` This command installs Tailwind CSS along with PostCSS and Autoprefixer, which are necessary for processing Tailwind’s CSS file. ## Step 3: Create Tailwind Config File Generate a Tailwind configuration file by executing: ``` npx tailwindcss init -p ``` This command creates a `tailwind.config.js` and a `postcss.config.js` file in your project root. You can customize this configuration file to tailor Tailwind’s setup to your project’s needs. tailwind.config.js ``` /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { extend: {}, }, plugins: [], } ``` postcss.config.js ``` module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` ## Step 4: Configure Tailwind to Process Your CSS Create a CSS file in your `./resources/css` directory, for example, `app.css`, and add the Tailwind directives to it: app.css ``` @tailwind base; @tailwind components; @tailwind utilities; ``` ## Step 5: Start the Build Process Run the following command to compile your CSS and JS files including Tailwind CSS. ``` npm run dev ``` Or, for production, use: ``` npm run prod ``` This command minimizes the CSS, optimizing it for production use. ## Step 6: Start Using Tailwind CSS Add the compiled CSS to the `` of your view using `@vite` to import the `app.css` file. test.blade.php ``` @vite('resources/css/app.css') Test View ``` You can now start using Tailwind utility classes to style your application. test.blade.php ``` @vite('resources/css/app.css') Test View # Hello world! ``` ## Conclusion You’ve successfully integrated Tailwind CSS into your Laravel project. You can now use Tailwind’s utility classes to style your application directly within your views, speeding up development and ensuring a consistent design system. Remember, you can customize your `tailwind.config.js` file to extend or modify Tailwind’s default configuration, tailoring it to your project’s specific needs. Happy styling with Tailwind CSS and Laravel!