I want to use Tailwind to style my app in React but some classes are not working, how can I fix it? And what would affect it?
function NavBar({ title }) {
return (
<nav className="navbar mb-12 shadow-lg bg-neutral text-neutral-content">
<div className="container mx-auto">
<div className="flex-none px-2 mx-2">
<AiFillGithub />
</div>
</div>
</nav>
);
}
but on web page nothing changed.
I sorted out the problem, in file tailwind.config.js I had:
content:["./src/**/*.{html,js}", "./components/**/*.{html,js}"]
and I should change for:
content: ["./src/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"]
I posted my solution just in case if someone will face the same problem
Related
how can I modify my Title.jsx code in order to have the possibility to give to this component another component i.e a button inside my Title component ?
Because if I want to display a button in the same line (on the right) as my title it's not possible, it's displayed under it (see picture). So do I have to go through this way or just using tailwindcss (which is not working if do right-0 left-0) ??
export default function Title({ className, title, children }) {
return (
<Format className={className}>
<h1>{title}</h1>
<hr />
{children}
</Format>
)
}
export default function Format({ className, children }) {
return (
<div className={`${className ?? ''}`}>
{children}
</div>
)
}
export default Display() {
return (
<Title>
<button> Button </button>
</Title>
}
Here is my code
Here the picture:
Maybe you should try to change order and encapsulate items inside Title's component:
export default function Title({ className, title, children }) {
return (
<Format className={className}>
<Format className="flex">
<h1 className="flex-1">{title}</h1>
{children}
<Format/>
<hr/>
</Format>
)
}
And add className what you want for new div wrapper, for example, flex and h1 title with flex-1 to expand it. If children is null, title will expand fullWidth.
I've updated answer and assume you will use div wrapper with Format component.
Guide in tailwind
You can use the flex property to achieve the same layout that you want. The idea is to keep the Title and Button in the same div with each of them are also enclosed within their separate div or span. And add flex justify-between items-center in the main div.
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-4 flex items-center bg-slate-200 justify-between">
<div><h4 class="font-semibold"> My Title</h3></div>
<div><button class="bg-purple-700 text-white px-4 py-2 rounded-md">Click</div>
</div>
I have successfully translated many of the pages on my website project but now I have moved to translate specific components that were created and it is not working.
The error message I get is as follows: "TypeError: Cannot read properties of undefined (reading 'titulo')"
**Note: I am using NextJS and TailwindCSS
This is the code for the JSON file strings where it should grab the translation, I have two files, one for ES (Spanish) and another EN (English)
"heroBanner":{
"titulo": "Ayudamos a PYMES a Captar la Atención mediante Publicidad Digital",
"subtitulo": "BIENVENIDO A COTTONMEDIA"
},
This is the component code where I have passed the props:
import React from 'react'
import Custom__Cursor from './Custom__Cursor'
function Hero__Banner(props) {
return (
<div>
<div className="relative h-screen">
<div className="h-full w-full">
<video autoPlay muted loop className="object-cover h-screen w-full ">
<source src="/AdsBgVideo.mp4" type="video/mp4">
</source>
</video>
</div>
<div className="absolute top-0 h-full w-full bg-black opacity-60 z-10"></div>
<div className="absolute top-1/4 z-20 max-w-screen-md md:max-w-screen-xl">
<div className='flex flex-col px-10 space-y-5'>
<p className='text-left text-sm md:text-base font-medium tracking-wide filter drop-shadow-md'>{props.titulo}</p>
<p className='text-left text-4xl md:text-5xl leading-normal md:leading-relaxed filter drop-shadow-md'>{props.subtitulo}</p>
</div>
</div>
</div>
</div>
)
}
export default Hero__Banner
Then where the component is rendered I have included these props with the string in order to get the translation as follows:
import Head from 'next/head'
import Image from 'next/image'
import Hero__Banner from '../components/Hero__Banner'
import ScrollToTop from '../components/ScrollToTop'
export default function Home(props) {
const { index, heroBanner } = props;
return (
<div>
<Head>
<title></title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/short-logo.svg" />
</Head>
{/*Main content */}
{/* Hero section */}
<Hero__Banner
titulo={heroBanner.titulo}
subtitulo={heroBanner.subtitulo}
/>
</div>
)
}
export async function getStaticProps({locale}) {
const response = await import(`../lang/${locale}.json`);
return {
props: {
index: response.default.index,
heroBanner: response.default.heroBanner
},
};
}
Even after doing that, I still get the same error, not sure why this is happening. The component translations are now on the index page which is in "pages", so it should work in my opinion. As you can see in the code, I already have some translated sections in the index, which work perfectly.
Error image
Any suggestions?
When you are translating with i18n, and get this error, it could be because you have altered the translation JSON file and the server needs to be restarted. That was the case for me, hope this helps.
I have a nextjs blog that I'm working on and one of the components I'm using is this card component:
function Card(props) {
return (
<div className="uk-card uk-card-default uk-width-1-2#m">
<div className="uk-card-header">
<div
className="uk-grid-small uk-flex-middle"
uk-grid
uk-scrollspy="cls: uk-animation-slide-left; repeat: true"
>
<div className="uk-width-auto">
<Image
alt="Profile Picture"
className="uk-border-circle"
src={props.pic}
height={200}
width={200}
/>
</div>
<div className="uk-width-expand">
<h3 className="uk-card-title uk-margin-remove-bottom">
{props.name}
</h3>
</div>
</div>
</div>
<div className="uk-card-body">
<p>{props.description}</p>
</div>
<div className="uk-card-footer">
</div>
</div>
)
}
I take that component and use it in the page like so:
export default Main =()=> {
return(
<Card
pic={placeholderpic}
linkedin='https://www.linkedin.com/'
name="Harry Truman"
description="Lorem ipsum"
/>
)
}
The icon in the footer does not render until the page is refreshed 3-4 times. All the rest of the card renders properly on first load. Ideally I'd like to know 3 things:
A. Why this is occurring?
B. How to troubleshoot this in the future?
C. What the most appropriate fix is for this.
Edit:
This question is essentially the same as mine:
Uikit Icons with React and Next.js
The solution for me is less than ideal, I don't want to wrap everything in a custom "UIKit" component.
I'm just learning React and Tailwind CSS and had a strange experience with CSS grid using Tailwind classes. I've made the buttons for a calculator, with the last Button spanning two columns:
App.js:
export default function App() {
return (
<div className="flex min-h-screen items-center justify-center bg-blue-400">
<Calculator />
</div>
);
}
Calculator.js
import { IoBackspaceOutline } from "react-icons/io5";
export const Calculator = () => {
return (
<div className="grid grid-cols-4 grid-rows-5 gap-2">
<Button>AC</Button>
<Button>
<IoBackspaceOutline size={26} />
</Button>
<Button>%</Button>
<Button>÷</Button>
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>x</Button>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>-</Button>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>+</Button>
<Button>0</Button>
<Button>.</Button>
<Button colSpan={2}>=</Button>
</div>
);
};
const Button = ({ colSpan = 1, rowSpan = 1, children }) => {
return (
<div
className={`col-span-${colSpan} row-span-${rowSpan} bg-white p-3 rounded`}
>
<div className="flex items-center justify-center">{children}</div>
</div>
);
};
This doesn't work (tested in Chrome):
Now here comes the weird part. I replaced the returned JSX from the App component with HTML from a Tailwind tutorial and deleted it again.
<div className="bg-blue-400 text-blue-400 min-h-screen flex items-center justify-center">
<div className="grid grid-cols-3 gap-2">
<div className="col-span-2 bg-white p-10 rounded">1</div>
<div className="bg-white p-10 rounded">2</div>
<div className="row-span-3 bg-white p-10 rounded">3</div>
<div className="bg-white p-10 rounded">4</div>
<div className="bg-white p-10 rounded">5</div>
<div className="bg-white p-10 rounded">6</div>
<div className="col-span-2 bg-white p-10 rounded">7</div>
<div className="bg-white p-10 rounded">8</div>
<div className="bg-white p-10 rounded">9</div>
</div>
</div>
After I Ctrl-Z'd a bunch of times, so I had only the previous code, my button suddenly spans two columns as intended:
I checked to make sure that there were no changes in the code:
My friend even cloned my repo, followed the same steps and got the same result.
He suspects that it has something to do with the variable classNames in my Button component with regards to Tailwind's JIT compiler, but none of us can pinpoint the error.
Am I using variable CSS classes wrong?
This has been a WTF moment. What could be the reason for this?
The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included.
If you only need to span 2 columns, you could pass boolean values which will trigger the addition of a full col-span-2 or row-span-2 utility class to be added:
const Button = ({ colSpan = false, rowSpan = false, children }) => {
return (
<div
className={`${colSpan ? 'col-span-2' : ''} ${rowSpan ? 'row-span-2' : ''} bg-white p-3 rounded`}
>
<div className="flex items-center justify-center">{children}</div>
</div>
);
};
Otherwise, you could pass the values as classes to the Button component:
<Button className='col-span-2 row-span-1'>=</Button>
const Button = ({ className, children }) => {
return (
<div
className={`${className} bg-white p-3 rounded`}
>
<div className="flex items-center justify-center">{children}</div>
</div>
);
};
More information: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Another tricky solution that worked for me is to use variable with forced type of the possible className values (in typescript) like :
export type TTextSizeClass =
'text-xl' |
'text-2xl' |
'text-3xl' |
'text-4xl' |
'text-5xl' |
'text-6xl' |
'text-7xl' |
'text-8xl' |
'text-9xl'
;
...
const type : number = 6 ;
const textSizeClass : TTextSizeClass = type != 1 ? `text-${type}xl` : 'text-xl';
...
<div className={`font-semibold ${textSizeClass} ${className}`}>text</div>
As Ed Lucas said:
The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. col-span-${colSpan}) will not be included
But now could use safeListing
and
tailwind-safelist-generator package to "pregenerate" our dynamics styles.
With tailwind-safelist-generator, you can generate a safelist.txt file for your theme based on a set of patterns.
Tailwind's JIT mode scans your codebase for class names, and generates
CSS based on what it finds. If a class name is not listed explicitly,
like text-${error ? 'red' : 'green'}-500, Tailwind won't discover it.
To ensure these utilities are generated, you can maintain a file that
lists them explicitly, like a safelist.txt file in the root of your
project.
"I am new to ReactBootstrap....I tried giving its className and rendering using css that did not work"
<Navbar dark>
<div className="container">
<NavbarBrand href="/" >Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<NavbarBrand> renders as <div class='navbar-brand'... > - so we just need to set the css for this class
relevant css:
.navbar.navbar-light a.navbar-brand {color:red;}
relevant js:
import './navbar.css';
working stackblitz here