{"id":108871,"date":"2024-02-21T07:29:16","date_gmt":"2024-02-21T12:29:16","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=108871"},"modified":"2024-05-10T10:25:09","modified_gmt":"2024-05-10T14:25:09","slug":"install-tailwind-css-in-laravel","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/","title":{"rendered":"Install Tailwind CSS in Laravel"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" class=\"wp-image-108874\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1-1024x538.png\" alt=\"Install Tailwind CSS in Laravel\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Integrating <a href=\"https:\/\/tailwindcss.com\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind CSS<\/a> with Laravel enhances your web application\u2019s 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.<\/p>\n\n\n<div class=\"jumbotron\">\r\n<p>Boost your Laravel apps with our specialized <a href=\"https:\/\/www.inmotionhosting.com\/laravel-hosting\">Laravel Hosting<\/a>. Experience faster speeds for your Laravel applications and websites thanks to NVMe storage, server protection, dedicated resources, and optimization tools.<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>99.99% Uptime    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Free SSL    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Dedicated IP Address    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Developer Tools<\/p>\r\n<p><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.inmotionhosting.com\/laravel-hosting\">Laravel Hosting<\/a><\/p>\r\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a> and <a href=\"https:\/\/www.npmjs.com\" target=\"_blank\" rel=\"noreferrer noopener\">npm<\/a> installed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Navigate to your Laravel Project Directory<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Start by navigating to your Laravel project\u2019s directory.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\">\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79b8ff;\">cd my-laravel-project<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you don\u2019t have a project set up already, you can use <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/how-to-install-laravel\/\" target=\"_blank\" rel=\"noreferrer noopener\">Composer<\/a> or <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-laravel-softaculous\/\" target=\"_blank\" rel=\"noreferrer noopener\">Softaculous<\/a> to install Laravel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Install Tailwind CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now install Tailwind CSS through npm. Open your terminal, navigate to your Laravel project directory, and run the following command:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\">\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79b8ff;\">npm install tailwindcss@latest postcss@latest autoprefixer@latest<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This command installs Tailwind CSS along with PostCSS and Autoprefixer, which are necessary for processing Tailwind\u2019s CSS file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Create Tailwind Config File<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Generate a Tailwind configuration file by executing:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\">\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79b8ff;\">npx tailwindcss init -p<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This command creates a <code>tailwind.config.js<\/code> and a <code>postcss.config.js<\/code> file in your project root. You can customize this configuration file to tailor Tailwind\u2019s setup to your project\u2019s needs.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\"><span style=\"display: flex; align-items: center; padding: 10px 0px 10px 16px; margin-bottom: -2px; width: 100%; text-align: left; background-color: #2f363c; color: #d3d7dd;\">tailwind.config.js<\/span>\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6a737d;\">\/** <\/span><span style=\"color: #f97583;\">@type<\/span> <span style=\"color: #b392f0;\">{import('tailwindcss').Config}<\/span><span style=\"color: #6a737d;\"> *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #79b8ff;\">module<\/span><span style=\"color: #e1e4e8;\">.<\/span><span style=\"color: #79b8ff;\">exports<\/span> <span style=\"color: #f97583;\">=<\/span><span style=\"color: #e1e4e8;\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  content: [],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  theme: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    extend: {},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  plugins: [],<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">}<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\"><span style=\"display: flex; align-items: center; padding: 10px 0px 10px 16px; margin-bottom: -2px; width: 100%; text-align: left; background-color: #2f363c; color: #d3d7dd;\">postcss.config.js<\/span>\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79b8ff;\">module<\/span><span style=\"color: #e1e4e8;\">.<\/span><span style=\"color: #79b8ff;\">exports<\/span> <span style=\"color: #f97583;\">=<\/span><span style=\"color: #e1e4e8;\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  plugins: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    tailwindcss: {},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    autoprefixer: {},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">}<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Configure Tailwind to Process Your CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create a CSS file in your <code>.\/resources\/css<\/code> directory, for example, <code>app.css<\/code>, and add the Tailwind directives to it:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\"><span style=\"display: flex; align-items: center; padding: 10px 0px 10px 16px; margin-bottom: -2px; width: 100%; text-align: left; background-color: #2f363c; color: #d3d7dd;\">app.css<\/span>\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #f97583;\">@tailwind<\/span><span style=\"color: #e1e4e8;\"> base; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">@tailwind components; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">@tailwind utilities;<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Start the Build Process<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Run the following command to compile your CSS and JS files including Tailwind CSS.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\">\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79b8ff;\">npm run dev<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Or, for production, use:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\">\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79b8ff;\">npm run prod<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This command minimizes the CSS, optimizing it for production use.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Start Using Tailwind CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add the compiled CSS to the <code>&lt;head&gt;<\/code> of your view using <code>@vite<\/code> to import the <code>app.css<\/code> file.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-blur-enabled\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-highlight-color: rgba(212, 226, 245, 0.2); line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\"><span style=\"display: flex; align-items: center; padding: 10px 0px 10px 16px; margin-bottom: -2px; width: 100%; text-align: left; background-color: #2f363c; color: #d3d7dd;\">test.blade.php<\/span>\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #e1e4e8;\">&lt;!<\/span><span style=\"color: #85e89d;\">DOCTYPE<\/span> <span style=\"color: #b392f0;\">html<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">&lt;<\/span><span style=\"color: #85e89d;\">html<\/span> <span style=\"color: #b392f0;\">lang<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"en\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  &lt;<\/span><span style=\"color: #85e89d;\">head<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">meta<\/span> <span style=\"color: #b392f0;\">charset<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"UTF-8\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">meta<\/span> <span style=\"color: #b392f0;\">name<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"viewport\"<\/span> <span style=\"color: #b392f0;\">content<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"width=device-width, initial-scale=1.0\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">      @vite('resources\/css\/app.css')<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">title<\/span><span style=\"color: #e1e4e8;\">&gt;Test View&lt;\/<\/span><span style=\"color: #85e89d;\">title<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  &lt;\/<\/span><span style=\"color: #85e89d;\">head<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You can now start using Tailwind utility classes to style your application.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: clamp(16px, 1rem, 24px); font-family: Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-highlight-color: rgba(212, 226, 245, 0.2); line-height: clamp(26px, 1.625rem, 39px); --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\"><span style=\"display: flex; align-items: center; padding: 10px 0px 10px 16px; margin-bottom: -2px; width: 100%; text-align: left; background-color: #2f363c; color: #d3d7dd;\">test.blade.php<\/span>\n<pre class=\"shiki github-dark\" style=\"background-color: #24292e;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #e1e4e8;\">&lt;!<\/span><span style=\"color: #85e89d;\">DOCTYPE<\/span> <span style=\"color: #b392f0;\">html<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">&lt;<\/span><span style=\"color: #85e89d;\">html<\/span> <span style=\"color: #b392f0;\">lang<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"en\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  &lt;<\/span><span style=\"color: #85e89d;\">head<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">meta<\/span> <span style=\"color: #b392f0;\">charset<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"UTF-8\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">meta<\/span> <span style=\"color: #b392f0;\">name<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"viewport\"<\/span> <span style=\"color: #b392f0;\">content<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"width=device-width, initial-scale=1.0\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">      @vite('resources\/css\/app.css')<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">title<\/span><span style=\"color: #e1e4e8;\">&gt;Test View&lt;\/<\/span><span style=\"color: #85e89d;\">title<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  &lt;\/<\/span><span style=\"color: #85e89d;\">head<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  &lt;<\/span><span style=\"color: #85e89d;\">body<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #e1e4e8;\">    &lt;<\/span><span style=\"color: #85e89d;\">h1<\/span> <span style=\"color: #b392f0;\">class<\/span><span style=\"color: #e1e4e8;\">=<\/span><span style=\"color: #9ecbff;\">\"mb-6 text-5xl font-bold\"<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #e1e4e8;\">      Hello world!<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #e1e4e8;\">    &lt;\/<\/span><span style=\"color: #85e89d;\">h1<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">  &lt;\/<\/span><span style=\"color: #85e89d;\">body<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #e1e4e8;\">&lt;\/<\/span><span style=\"color: #85e89d;\">html<\/span><span style=\"color: #e1e4e8;\">&gt;<\/span><\/span><\/code><\/pre>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ve successfully integrated Tailwind CSS into your Laravel project. You can now use Tailwind\u2019s utility classes to style your application directly within your views, speeding up development and ensuring a consistent design system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember, you can customize your <code>tailwind.config.js<\/code> file to extend or modify Tailwind\u2019s default configuration, tailoring it to your project\u2019s specific needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Happy styling with Tailwind CSS and Laravel!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Integrating Tailwind CSS with Laravel enhances your web application&#8217;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<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/\"> Read More ><\/a><\/p>\n","protected":false},"author":57032,"featured_media":108874,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ayudawp_aiss_exclude":false,"_ayudawp_aiss_exclude_summary":false,"_ayudawp_aiss_summary":"Tailwind CSS is a utility-first CSS framework that allows developers to style their applications directly within their HTML markup. This command installs Tailwind CSS along with PostCSS and Autoprefixer, which are necessary for processing Tailwind's CSS file. Create a CSS file in your directory, for example, , and add the Tailwind directives to it:. app.css.","_ayudawp_aiss_summary_provider":"extractive","_ayudawp_aiss_summary_hash":"e4be3eac8be89c0798a0f1eeefba3b83139f64e0","_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4486],"tags":[],"class_list":["post-108871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Install Tailwind CSS in Laravel | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to install Tailwind CSS in Laravel to create beautiful applications with streamlined UI development and rapid styling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Install Tailwind CSS in Laravel | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn how to install Tailwind CSS in Laravel to create beautiful applications with streamlined UI development and rapid styling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-21T12:29:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-10T14:25:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Derrell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Derrell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/\"},\"author\":{\"name\":\"Derrell\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#\\\/schema\\\/person\\\/0736f70b4077032374f89709cdc255b7\"},\"headline\":\"Install Tailwind CSS in Laravel\",\"datePublished\":\"2024-02-21T12:29:16+00:00\",\"dateModified\":\"2024-05-10T14:25:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/\"},\"wordCount\":379,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/tailwind-laravel-1.png\",\"articleSection\":[\"Laravel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/\",\"url\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/\",\"name\":\"Install Tailwind CSS in Laravel | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/tailwind-laravel-1.png\",\"datePublished\":\"2024-02-21T12:29:16+00:00\",\"dateModified\":\"2024-05-10T14:25:09+00:00\",\"description\":\"Learn how to install Tailwind CSS in Laravel to create beautiful applications with streamlined UI development and rapid styling.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/tailwind-laravel-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/tailwind-laravel-1.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/edu\\\/laravel\\\/install-tailwind-css-in-laravel\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Install Tailwind CSS in Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#website\",\"url\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inmotionhosting\\\/\",\"https:\\\/\\\/x.com\\\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/#\\\/schema\\\/person\\\/0736f70b4077032374f89709cdc255b7\",\"name\":\"Derrell\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/derrell-willis\"],\"url\":\"https:\\\/\\\/www.inmotionhosting.com\\\/support\\\/author\\\/derrellw\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Install Tailwind CSS in Laravel | InMotion Hosting","description":"Learn how to install Tailwind CSS in Laravel to create beautiful applications with streamlined UI development and rapid styling.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/","og_locale":"en_US","og_type":"article","og_title":"Install Tailwind CSS in Laravel | InMotion Hosting","og_description":"Learn how to install Tailwind CSS in Laravel to create beautiful applications with streamlined UI development and rapid styling.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2024-02-21T12:29:16+00:00","article_modified_time":"2024-05-10T14:25:09+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png","type":"image\/png"}],"author":"Derrell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Derrell","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/"},"author":{"name":"Derrell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0736f70b4077032374f89709cdc255b7"},"headline":"Install Tailwind CSS in Laravel","datePublished":"2024-02-21T12:29:16+00:00","dateModified":"2024-05-10T14:25:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/"},"wordCount":379,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png","articleSection":["Laravel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/","name":"Install Tailwind CSS in Laravel | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png","datePublished":"2024-02-21T12:29:16+00:00","dateModified":"2024-05-10T14:25:09+00:00","description":"Learn how to install Tailwind CSS in Laravel to create beautiful applications with streamlined UI development and rapid styling.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/install-tailwind-css-in-laravel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Install Tailwind CSS in Laravel"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0736f70b4077032374f89709cdc255b7","name":"Derrell","sameAs":["https:\/\/www.linkedin.com\/in\/derrell-willis"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/derrellw\/"}]}},"jetpack_featured_media_url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/02\/tailwind-laravel-1.png","jetpack_sharing_enabled":true,"primary_category":{"id":4486,"name":"Laravel","slug":"laravel","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/108871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/57032"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=108871"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/108871\/revisions"}],"predecessor-version":[{"id":127823,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/108871\/revisions\/127823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media\/108874"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=108871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=108871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=108871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}