I am learning tailwind these last days and I was wondering if there was any ways to "group" many properties after a media queries or a "hover:" for example.
<a
className="text-[#7E0000] no-underline text-xl mt-0 mb-3 pt-3 pb-3 relative z-0 cursor-pointer
after:left-0 after:bottom-0 after:absolute after:opacity-0 after:w-0 after:h-1 after:content-[''] after:bg-[#7E0000] after:transition-all after:duration-500"
onClick={() => scrollToView("nous")}
>
For example here, I have many properties that I want to add to "after:", is it possible to do a thing like : after:{opactiy-0 bottom-0 left-0} instead of after:opacity-0 after:bottom-0...
Thank you for your help
Related
I am using tailwind classes and below is my code. some people suggested to use classNames so used that as well, so similar code in both the newer and older format
const backgroundColor = disabled ? "bg-secondary-500" : "bg-green-700";
className={classNames(
"w-20 my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
customClass,
backgroundColor,
{ "pointer-events-none": true }
)}
className={`w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : ""}
${customClass}`}
so in my customClass I have "w-60". but "w-20" is only getting applied. even it is happening for "bg-green-700" and I wanted it to be "bg-secondary-500" for disabled: true
so my disabled is coming as true and pointer-event-none is getting applied but secondary class is overridden by green class
I checked the DOM and both the bg class and both the width classes are available in the below order
<button class="w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200 w-60
bg-secondary-500 pointer-events-none">View Docs
</button>
so if anyone has any idea this is happening, please help
For merging Tailwind classes use https://github.com/dcastil/tailwind-merge instead of classNames
import { twMerge } from 'tailwind-merge'
// ...
className={twMerge(
"w-20 my-2 p-2 text-white bg-green-700 rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
disabled && "pointer-events-none bg-secondary-500",
customClass
)}
Here if I understood correctly , you want bg-secondary-500 when button is disabled. This can be done by this
className={`w-20 my-2 p-2 text-white rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : "bg-green-500 pointer-events-auto"}
`}
However you need to add any condtion if you want to change from w-20 to w-60. Else simply use w-60.
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 using formvalidation.io and Tailwind. Whilst there are plugins for many of the major frameworks, there does not appear to be one for Tailwind.
My issue is trying to get the error messages to appear below the form input to which they relate. There are five inputs, all along the same lines :
<div class="relative w-full mb-3">
<label class="block uppercase text-thatblue text-xs font-bold mb-2" for="password">Password</label>
<input type="password" name="password" id="password" class="border-0 px-3 py-3 placeholder-thatblue-lightest text-thatblue bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" placeholder="Password">
</div>
If I put in an empty div with an ID of "messages" at the bottom of the form input I can get the error messages to display in that div using :
message: new FormValidation.plugins.Message({
clazz: 'text-xs text-red-500',
container: '#messages'
},
}),
...but that's not a great visual layout.
If, however, I put in an empty div with class of messages under each of the inputs
<div class="messages"></div>
And then change the container targeted by formvalidation.io to be
container: '.messages'
...then error messages for all five inputs appear against the first input, which is even less ideal.
The documentation suggests that I can target closest siblings using :
message: new FormValidation.plugins.Message({
clazz: 'text-xs text-red-500',
container: function (field, ele) {
return FormValidation.utils.closest(ele, '.messages').nextElementSibling;
},
}),
But this does nothing.
What am I missing, Obi Wan? You're my only hope.
I'm a primarily back-end developer, so I'm not that experienced with front end stuff. I'm using React with Tailwind CSS to create a page, and I have this segmented control on the page.
Currently, it works just fine, and the white background and shadow statically changes between Monthly and Yearly. However, I would like to make it animated / have a transition so that the white background / shadow slides from Monthly to Yearly and vice versa. I've never done front end transitions / animations before so not really sure how to go about this, especially with Tailwind CSS.
This is the code for the segmented control currently:
function makeRecurrenceIntervalButtons(
currentInterval: RecurringPriceInterval,
setInterval: (interval: RecurringPriceInterval) => void,
) {
return ['month', 'year'].map((interval: RecurringPriceInterval) => {
const className = currentInterval === interval
? `relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8`
: `ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8`;
const title = interval === 'month' ? 'Monthly' : 'Yearly';
return (
<button
key={interval}
onClick={() => setInterval(interval)}
type="button"
className={className}
>
{title}
</button>
);
});
}
I've looked at this page extensively, but not sure how to properly apply it at all. Any help would be appreciated, thanks!
First of all, you need to add transform class - othervise transitions wouldn't work.
Next there are a few classes to control you transition timing - duration and timing function
Finally, in first case you should add translate-x-0, when it's Yearly - translate-x-full - it should move button on it's own full width (not the parent element) in a positive x-axis direction.
So add this classes, for ex:
Monthly - transform duration-700 ease-in-out translate-x-0
Yearly - transform duration-700 ease-in-out translate-x-full
I'm trying to style a component properly. At the moment, the table works beautifully, but the style of it isn't ideal, and usually this would be easy to fix with tailwind but the components layout makes it very confusing to know exactly how to style it.
This is the example I am referencing,
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink
Now specifically what I want to change is the group functions. Currently the use emoji's to work, I really want to to be a proper button so users understand very clearly the functionality of the component, as below.
<table className="w-full text-md bg-white shadow-md rounded mb-4" {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th className={td_header} {...column.getHeaderProps()}>
<div>
{column.canGroupBy ? (
// If the column can be grouped, let's add a toggle
<span {...column.getGroupByToggleProps()}>
{column.isGrouped ? 'Click to Un-Group 🛑 Click to Sort!' : ' Click to Group 🔮 Click to Sort!'}
</span>
) : null}
<span {...column.getSortByToggleProps()}>
{column.render('Header')}
{/* Add a sort direction indicator */}
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</div>
{/* Render the columns filter UI */}
<div>{column.canFilter ? column.render('Filter') : null}</div>
</th>
))}
Now ideally I want something like this for the group and filter toggle, taken from tailwind
https://tailwindcss.com/components/buttons
<div class="inline-flex">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">
Group
</button>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r">
Filter
</button>
</div>
How does one go about styling this effectively, given the string it is using is not a component and does not have any styling that I can see involved?
Thanks in advance,
The string present in your question is not a component, but it easily could be. Those elements don't necessarily need to be strings; react-table is a headless library, so you're free to change the visuals the way you want. There are a variety of possible solutions here. One solution would be to replace the entire ternary by defining a custom functional component for that sort icon:
const sortIcon = (sorted, sortedDesc) => {
if (sortedDesc) {
return (<h1> this is arbitrary </h1>);
} else if (sorted) {
return (<h2> more arbitrary </h2>);
} else {
return null;
}
}
and then replacing the ternary:
<span {...column.getSortByToggleProps()}>
{column.render('Header')}
{/* Add a sort direction indicator */}
{sortIcon(column.isSorted, column.isSortedDesc)}
</span>
This is a bad way to do it, probably, and untested beside that, but the point is that the HTML/JSX stuff is arbitrary. Those emoji strings can be replaced with valid JSX in any form. You could do a similar thing with the column.isGrouped ternary, as well! It may be worth looking at some JSX tutorials if you're not already familiar, or re-familiarizing yourself with exactly what a column Object contains if you want to continue to add functionality.
(link caveat: each of the different useX hooks adds more stuff to the column/row/etc Objects, so I just linked the core useTable one)