Creating your project

Cara Import Project Laravel Web. Cmder will be refered as console. ##Mac Os, Ubuntu and windows users continue here: Create a database locally named homestead utf8.

Start by creating a new Laravel project if you don't have one set up already.The most common approach is to use the Laravel Installer:

Your First Laravel Project. We want it to be as easy as possible to get started with Laravel. There are a variety of options for developing and running a Laravel project on your own computer. While you may wish to explore these options at a later time, Laravel provides Sail, a built-in solution for running your Laravel project using Docker. Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–cont.

Next, install Laravel's front-end dependencies using npm:

Setting up Tailwind CSS

Tailwind CSS requires Node.js 12.13.0 or higher.

Install Tailwind via npm

Install Tailwind and its peer-dependencies using npm:

Create your configuration file

Next, generate your tailwind.config.js file:

This will create a minimal tailwind.config.js file at the root of your project:

Learn more about configuring Tailwind in the configuration documentation.

Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your Blade templates and JavaScript components so Tailwind can tree-shake unused styles in production builds:

Cara Import Project Laravel Pdf

Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.

Configure Tailwind with Laravel Mix

In your webpack.mix.js, add tailwindcss as a PostCSS plugin:

Include Tailwind in your CSS

Open the ./resources/css/app.css file that Laravel generates for you by defaultand use the @tailwind directive to include Tailwind's base, components, and utilities styles, replacing the original file contents:

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

Read our documentation on adding base styles, extracting components, and adding new utilities for best practices on extending Tailwind with your own custom CSS.

Cara Import Project Laravel File

Next, import your stylesheet in your main Blade layout (commonly resources/views/layouts/app.blade.php or similar) and add the responsive viewport meta tag if it's not already present:

Cara Import Project Laravel Dari Github

You're finished! Now when you run npm run watch, npm run dev or npm run prod, Tailwind CSS will be ready to use in your Laravel Mix project.