Environment requirement
-- PHP 8.0.30
-- node v18.16.0
-- laravel 10
1. Create your project.
-- composer create-project laravel/laravel laravel-tailwind-app
-- cd laravel-tailwind-app
-- npm install -D tailwindcss postcss autoprefixer
-- npx tailwindcss init -p
2. Configure your template paths
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",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
3. Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
4. Start your build process
Update your package.json file.
...
"scripts": {
"dev": "vite",
"build": "vite build",
"watch": "vite build --watch"
},
...
[Delete "package-lock.json" file. If you have in project folder]
-- npm install
-- Run your build process with npm run dev
or
-- Run your build process with npm run watch
4. Start using Tailwind in your project
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>
0 comments:
Post a Comment