I installed a new Laravel project. I want to use TailWindCSS and followed the instructions exactly as per the tailwind website. When I run npm run dev
my resources/css/app.css file is not populated with Tailwind rules and I still have only the three:
@tailwind base;
@tailwind components;
@tailwind utilities;
with a warning of Unknown at rule @tailwindcss(unknownAtRules)
. I was watching a video and the video the person runs npm dev and the app.css file is full of rules populated by Tailwind
Here is my tailwind.config.js file:
module.exports = {
content: [
"./storage/framework/views/*.php",
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: { extend: {} },
plugins: [],
};
and here is my main view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add A Post</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
@yield('content')
</body>
</html>
In tailwind.config.js file, try this:
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
Let me know if that makes a difference.
I tried what you said and not working no. I am using all the latest. Laravel 9 and the latest of all the plugins etc.
If you are using VScode then add:
Tailwind Css IntelliSense Extension,
then add
"files.associations": { "*.css": "tailwindcss" },
to settings.json file.
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community