{"componentChunkName":"component---src-templates-blog-js","path":"/blog/how-to-install-tailwind-css-in-laravel/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"3d7f4349-952c-52f0-bf44-c94dc7bb1c45","excerpt":"Tailwind in Laravel If you're a web developer, you probably know how important it is to have a responsive and well-designed website. One tool that can help you…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"How to install Tailwind CSS with Laravel\",\n \"lastUpdated\": \"12 May 2024\",\n \"date\": \"2023-04-10T02:16:04+01:00\",\n \"metaTitle\": \"How to install Tailwind CSS in Laravel\",\n \"metaDescription\": \"Learn how to easily install and configure CSS Tailwind in your Laravel project. Follow our step-by-step guide to optimize your website's design and improve its performance with the Tailwind CSS and Laravel integration.\",\n \"type\": \"blog\",\n \"author\": \"Emmanuel Chinonso\",\n \"role\": \"Technical Writer\",\n \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n \"image\": \"./_/images/tailwind-css-in-laravel.png\",\n \"tags\": [\"tailwind css\", \"bootstrap\", \"bootstrap 5 alpha\"],\n \"previousTitle\": \"How to Create Tailwind CSS table\",\n \"previousPath\": \"how-to-create-tailwind-css-tables\",\n \"nextTitle\": \"How to Install Tailwind CSS in Vue.js\",\n \"nextPath\": \"how-to-install-tailwind-css-in-vuejs\",\n \"blogtype\": \"tailwindcss\",\n \"canonicalUrl\": \"https://windframe.dev/blog/how-to-install-tailwind-css-in-laravel\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind in Laravel\"), mdx(\"p\", null, \"If you're a web developer, you probably know how important it is to have a responsive and well-designed website. One tool that can help you achieve this is Tailwind CSS. In this article, we will discuss how to install Tailwind CSS with Laravel, one of the most popular PHP frameworks.\"), mdx(\"h2\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Introduction\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Advantages of using Tailwind CSS with Laravel\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Prerequisites\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Installing Tailwind CSS with Laravel\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Configuring Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Include tailwind in your CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Creating a sample application\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Adding custom styles\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Compiling Tailwind CSS\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conclusion\")), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to help you design your website. Laravel is a PHP web application framework that provides an elegant syntax and tools to help you build web applications quickly. By combining Tailwind CSS with Laravel, you can create a responsive and visually appealing website in a short amount of time.\"), mdx(\"h2\", null, \"Advantages of using Tailwind CSS with Laravel\"), mdx(\"p\", null, \"Here are some advantages of using Tailwind CSS in Laravel:\"), mdx(\"p\", null, \"Tailwind CSS is easy to learn and provides a lot of pre-defined classes that can help you design your website quickly.\\nLaravel's Blade templating engine makes it easy to use Tailwind CSS in your views.\\nTailwind CSS is highly customizable and provides a lot of options to help you design your website according to your needs.\\nLaravel provides a lot of tools to help you build web applications quickly, and using Tailwind CSS can help you create a responsive and visually appealing website in a short amount of time.\"), mdx(\"h2\", null, \"Prerequisites\"), mdx(\"p\", null, \"Before you can install Tailwind CSS with Laravel, you need to have the following:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Laravel installed on your machine\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Node.js installed on your machine\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"NPM installed on your machine\")), mdx(\"h2\", null, \"Installing Tailwind CSS with Laravel\"), mdx(\"p\", null, \"To install Tailwind CSS with Laravel, follow these steps:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Open a command prompt and navigate to your Laravel project directory.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Run the following command to install Tailwind CSS\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm install tailwindcss\\n\")), mdx(\"p\", null, \"Run the following command to install the Laravel Mix plugin for Tailwind CSS:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm install laravel-mix-tailwind\\n\")), mdx(\"h2\", null, \"Configuring Tailwind CSS\"), mdx(\"p\", null, \"After installing Tailwind CSS, you need to configure it for your Laravel project. To do this, follow these steps:\"), mdx(\"p\", null, \"Create a new file named \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tailwind.config.js\"), \" in your project root directory.\"), mdx(\"p\", null, \"Add the following code to the file:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"module.exports = {\\n purge: [],\\n darkMode: false, // or 'media' or 'class'\\n theme: {\\n extend: {},\\n },\\n variants: {\\n extend: {},\\n },\\n plugins: [],\\n};\\n\")), mdx(\"p\", null, \"Add the following code to your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"webpack.mix.js\"), \" file:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"const mix = require('laravel-mix');\\n\\nrequire('laravel-mix-tailwind');\\n\\nmix\\n .js('resources/js/app.js', 'public/js')\\n .sass('resources/sass/app.scss', 'public/css')\\n .tailwind();\\n\")), mdx(\"h2\", null, \"Include tailwind in your CSS\"), mdx(\"p\", null, \"You will need to import the tailwind from the app.css using the path \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"./resources/css/app.css\"), \". As this was generated by default and replace the original file contents with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@tailwind\"), \" directives to include Tailwind\\u2019s \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"base\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"component\"), \", and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"utilities\"), \" styles.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"/* ./resources/css/app.css */\\n@import '~tailwindcss/base.css';\\n@import '~tailwindcss/components.css';\\n@import '~tailwindcss/utilities.css';\\n\")), mdx(\"h2\", null, \"Creating a sample application\"), mdx(\"p\", null, \"We are going to build a simple\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Create a new Laravel project using the following command:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"\\nlaravel new sample-project\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Navigate to the project directory and run the following command to start the development server:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"php artisan serve\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Open your web browser and navigate to http://localhost:8000. You should see the default Laravel welcome page.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Create a new file named \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"welcome.blade.php\"), \" in the resources/views directory.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Add the following code to the file:\"))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n
\\n
\\n
\\n \\n \\n
\\n
\\n \\n \\n

Please choose a Password.

\\n
\\n
\\n \\n \\n Forgot Password?\\n \\n
\\n
\\n

@2023 Devwares develop. All rights reserved.\\n

\\n
\\n
\\n\\n
\\n \\n\\n\\n\")), mdx(\"p\", null, \"Below is how our webpage should look once we have saved our file. And reloaded our server.\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/blog/images/tailwind-css-in-laravel2.png\",\n \"alt\": \"Tailwind CSS in Laravel\"\n }), \".\"), mdx(\"h2\", null, \"Adding custom styles\"), mdx(\"p\", null, \"Tailwind CSS provides a lot of pre-defined classes, but you may need to add custom styles to your website. To add custom styles, you can create a new file named \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"app.scss\"), \" in the resources/sass directory and add your styles to the file.\"), mdx(\"p\", null, \"For example, to add a custom color to your website, you can use the following code:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-scss\"\n }, \"copycode\\\\$custom-color: #f00;\\n\\n.btn {\\n background-color: \\\\$custom-color;\\n}\\n\")), mdx(\"p\", null, \"After adding your custom styles, you need to compile the Sass code to CSS code using the following command:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm run dev\\n\")), mdx(\"h2\", null, \"Compiling Tailwind CSS\"), mdx(\"p\", null, \"After making changes to your Tailwind CSS configuration or custom styles, you need to compile the CSS code using the following command:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm run dev\\n\")), mdx(\"p\", null, \"This will compile your Sass code to CSS code and generate a new \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"app.css\"), \" file in the public/css directory.\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Tailwind CSS is a powerful CSS framework that can help you create a responsive and visually appealing website quickly. By combining Tailwind CSS with Laravel, you can take advantage of Laravel's tools and utilities to build web applications quickly and efficiently.\"), mdx(\"p\", null, \"In this article, we discussed how to install Tailwind CSS with Laravel, how to configure Tailwind CSS, and how to use Tailwind CSS with Laravel's Blade templating engine. We also discussed how to add custom styles and how to compile Tailwind CSS.\"), mdx(\"p\", null, \"If you're a web developer, we highly recommend using Tailwind CSS with Laravel to create professional-looking websites quickly and efficiently.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to install Tailwind CSS with Laravel","date":"April 10, 2023","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAACkUlEQVQoz2P4DwTXr/4/fuT/40f///37/+L531+/gGJLly2vrKqJiYlyc3HOiY9IjwhwcbQP8Pd9+PLlxQ+fz1+84ObqxADSfPjg/707/184+//8mf/7dv87cxIo1tfXt2zJwuqaqqnN5ccX906ryAh2c3B1cb5x797v//8P7N8HNAis+caN/1cu/j998v/Rw//37v5/6cK////Xb9h088bl9evXhvr7reqtmV+f52JjYWJilJebvXLpkrDQYCMjI7Dma1f/H9jz/+zp/5cv/N+68f+fP0Cxx48e3L19NTUtS0RCQUNDJyXIq688Mykuwt7eVktL08jQ0NbODqT5341r/86d/nf00P9rl/89evgPZN7/k6dOzZg5Q1vXWFVNS1pWwd3FYdG8SXt2b1izamFLU7Wnh1t6WiLYZiB48ez/yaP/P34AMv/+/QskJ0yepaFtoqqmraCgHBMVsmPL8hOHdxzctnrb/IkbV83dvHEJ0AiQ5pcvXz54/OTF69fPXr58/PjxjRs3/vz509DUIS2rrKaupaCo5Ozs2NbWsnXDiq2zu1Z3V85qLt24em52dg7Dr1+/Hjx4cOf27Yf37z9+9Oju3bt37tz59+9fXn6xpLS8iqo6EDg6uYVGJBdkZC7vqdk9s3VxS9GkztqQiHiG379/P3ny+CEYvHjxAmgz0CFA5+TkFkhIyigrqxgbG4dFxMcn502tL9s5o2XTxPq8mCBgPAWHwfz8+fPn+/fv37p168mTJxCRrJw8EVEJNTVVZxeP2ITMuKScpLgEH2dHTU1tKRk5E1Pz8KgUcGj/+wcMJKA/gSSEDRTMzMoRFhHRNzAIDImOS8xOSM7x8ouQVVRXVFZXVFS2sLAKDU8CADILlx4UmRGaAAAAAElFTkSuQmCC","aspectRatio":1.7730496453900708,"src":"/static/45d0d01328b15773323d80a327a05b98/6463b/tailwind-css-in-laravel.png","srcSet":"/static/45d0d01328b15773323d80a327a05b98/84249/tailwind-css-in-laravel.png 250w,\n/static/45d0d01328b15773323d80a327a05b98/6463b/tailwind-css-in-laravel.png 435w","sizes":"(max-width: 435px) 100vw, 435px"}}},"imageExternal":null,"lastUpdated":"12 May 2024","author":"Emmanuel Chinonso","role":"Technical Writer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"How to install Tailwind CSS in Laravel","metaDescription":"Learn how to easily install and configure CSS Tailwind in your Laravel project. Follow our step-by-step guide to optimize your website's design and improve its performance with the Tailwind CSS and Laravel integration.","previousTitle":"How to Create Tailwind CSS table","previousPath":"how-to-create-tailwind-css-tables","nextTitle":"How to Install Tailwind CSS in Vue.js","nextPath":"how-to-install-tailwind-css-in-vuejs","blogtype":"tailwindcss"},"fields":{"slug":"/how-to-install-tailwind-css-in-laravel/"}},"previous":null,"next":null},"pageContext":{"id":"3d7f4349-952c-52f0-bf44-c94dc7bb1c45"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}