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
Related
All the classes in my project (react + vite) work except the media queries, and I am having a hard time figuring out why. I tried manually adding all the breakpoints (with the default values) in the tailwind config file which had no effect at all.
function Sidebar(props) {
return(
<>
<aside className="text-xl p-4">
<h1 className="font-chivoMono ">Noteit</h1>
<h3 className="text-xl md:text-7xl text-white sm:text-red-500 md:text-green-300 lg:text-pink-300">{props.displayName}</h3>
</aside>
</>
)
}
export default Sidebar
I took all the configuration steps correctly (and I think no classes would have worked if i didn't)
I tried to run the command
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
thinking it might do something but honestly I am just completely clueless to why this is not working
Also, the media queries do not show up while inspecting the page.
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 try to use some tailwind classes, but there's classes that not working properly.
<h2 class="text-6xl">Test</h2> Is working
<h2 class="text-4xl">Test</h2> Isn't working
<h2 class="text-orange-500">Test</h2> Is working
<h2 class="mt-4">Test</h2> Isn't working
Ah, i have to --watch my tailwind before.
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.
I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.
The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.
<div class="container mx-auto">
<div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
// Content
</div>
</div>
Watch a gif of it.
What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.
I'd like to mention that I am using VueJS, if that's of any help. Any ideas?
Thanks in advance.
Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to postcss.config.js.
npm install postcss-preset-env --save-dev
postcss.config.js
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 0 }),
require('tailwindcss')('tailwind.js'),
require('autoprefixer')
]
}