error after run project
I wrote this in global.css :
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#layer components{
.icon{
#apply hidden xl:inline-flex p-2 h-10 w-10 bg-gray-200 rounded-full text-gray-70 cursor-pointer hover:bg-gray-300;
}
}
and then I got error from the image
Have you installed the package?
npm install --save-dev postcss-import
or
yarn add --dev postcss-import
Related
I am new to Tailwind CSS. I got this error while building a React project:
The hover: class does not exist. If hover: is a custom class, make sure it is defined within a #layer directive.
I found a similar problem on StackOverflow but it isn't helping me. Can anyone tell me why this is happening?
//Index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.btn-purple {
#apply px-4 py-1 text-sm text-purple-600 font-semibold border border-purple-200 rounded-full hover: text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2;
}
}
It is not identifying the hover property because of space after hover: in text-white.
Remove the space after the hover
hover:text-white
I suggest to simply save without formatting in order to avoid this behavior. You can also disable some auto-formatting settings in VSC.
I've also answered this in your GitHub discussion:
Save using CTRL + K, and then CTRL + SHIFT + S. This is the VSC shortcut to Save without formatting (see screenshot)
You'll have to make a new selector and then put all the hover elements in there.
.btn-purple {
#apply classA classB;
}
.btn-purple:hover {
#apply hoverClassC hoverClassD;
}
Make sure you don't put hover: in front of the hover classes though
I have installed a fresh version of Laravel 9.x (9.2 to be exact) with the Laravel Breeze starter kit for authentication. By default Laravel Breeze comes with Tailwind 3.x installed which is compiled in the following line inside the <head> HTML tags.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
Part of my view for some reason only renders correctly when I manually add the Tailwind CSS CDN file to the head like this in the app.blade.php file (obviously I'd prefer to NOT use the CDN file as Tailwind 3.x is already compiled within the app.css stylesheet).
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Really need to remove this line below -->
<script src="https://cdn.tailwindcss.com/3.0.23"></script>
</head>
-- How it looks WITH the CDN link added to the head tag (this is how it should look like but without using the CDN) --
-- How it looks WITHOUT the CDN link added to the head tag --
Here is the code within my blade file (i've removed the Laravel PHP logic for simplicity and readability).
<tr style="display: none;" x-show="selected == {{ $loop->iteration }}">
<td class="text-center text-xs" colspan="5">
<div class="flex flex-row">
<div class="basis-2/12">
<div>
player123 | 9.3
</div>
</div>
<div class="basis-8/12">
<div class="grid grid-cols-3 gap-4 w-100 md:w-1/2 mx-auto border-b py-2">
<div class="text-center text-xs md:text-sm">10</div>
<div class="text-center text-xs md:text-sm">Shots on Target</div>
<div class="text-center text-xs md:text-sm">10</div>
</div>
</div>
<div class="basis-2/12">
<div>
player721 | 9.3
</div>
</div>
</div>
</td>
</tr>
-- Expected behaviour --
Have then stats 'row' displayed so it uses the full width of the table but without using the <script src="https://cdn.tailwindcss.com/3.0.23"></script> tag (as illustrated in first image above).
-- Actual behaviour --
The stats 'row' has seemingly 'floated' to the left hand side of element - can anyone explain why the flex-row doesn't use the full width of the <td> container within the table?
p.s I am running npm run watch to auto build my app.css and I can see Tailwind 3.x stuff in the app.css file when I view source.
Cannot believe this - I had not run npm run watch that recreates the app.css - obviously tired.com
i solve this problem by adding the path for my vue components which i placed in resource for example: resource/js/components/companies/CompanyIndex.vue adding this './resources/js/**/*.vue' to content list in tailwind.config.js will solve the problem
In app.css, try replacing:
#tailwind base;
#tailwind components;
#tailwind utilities;
with:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
and run npm run dev or npm run watch again.
Where is your Blade file located? Laravel Breeze's default tailwind.config.js only looks in the following paths for discovery of the classes it needs to generate.
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
I am playing around with Tailwind and Next.js, but I am having trouble figuring out if it's installed or not. Even when I go to https://play.tailwindcss.com/ and try the following HTML element styled with Tailwind.
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
It doesn't render it underlined or even an h1 element. I follow the instructions at https://tailwindcss.com/docs/guides/nextjs verbatim. Any ideas?
The reason it's not working for you is that you are using className instead of class.
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
Using NPM, you can see if a specific package is installed.
npm view tailwindcss version
Or
npm info tailwindcss version
If you're using NPX, you can do the following.
npx gvi tailwindcss
I have a project created with Laravel 8, Jetstream, I've installed Tailwind CSS and fontawesome-free too.
When I use this classes like that:
<i class="fa fa-user-circle text-white cursor-pointer text-6xl"></i>
text-white and cursor-pointer works perfectly but "text-6xl" don't
if I use style="font-size: 60px" this works, but the class of Tailwind don't
The issue is that using laravel 8 with scss, but the output for your tailwind is css, try changing it and it should work.
Run npm run dev
Not all of tailwind css classes will be available unless you build dev assets.
You can also npm run dev watch to watch the files and recompile when one of them changes.
In bootstrap 4 docs, there're overflow-hidden and overflow-auto classes for elements, but in reactstrap if I try this:
<Col xs={3} className="overflow-hidden">
<Sidebar/>
</Col>
That col does not get overflow: hidden. How to use overflow-{} classes in reactstrap?
UPD: It seems that that class doesn't exist:
You can make use of bootstrap classes with reactstrap as follows:
Install following dependencies
npm install --save bootstrap#4.2.1
npm install --save reactstrap
Add the following line in the component where you like to use Bootstrap 4 classes:
import 'bootstrap/dist/css/bootstrap.css';