Comments (12)
Hello @sarodspirit,
classnames
should be imported from the generated file, because the npm package only contains types for default tailwindcss classes.
from tailwindcss-classnames.
@sarodspirit you want to do something like this
{
"scripts": {
"generate-css-types": "tailwindcss-classnames --classesFile css-types --typeName ClassNames --config path/to/tailwind.config.js -o src/@types/tailwind.ts"
}
}
Your css-types.ts
file should look like this:
export type ClassNames = 'text-pink-600' | 'text-pink-700' | 'text-pink-800' | 'text-pink-900' | 'text-primary' | 'text-nermin' | 'text-ribbon-200';
from tailwindcss-classnames.
Hey @muhammadsammy !
Thank you for your answer. I would really like to avoid ternaries with single classNames as this would lead to the same conditional mess I have been in before. Why is passing multiple classNames considered problematic?
It would work but it won't give you the typescript support or validation, for me I tried your example and It gave me errors
See TS Playground
from tailwindcss-classnames.
But it should be possible to pass the in wrapped in an additional classnames(...) and gets validation etc back, correct?
If I understood you correctly, yes.
You could use nested classnames()
inside another classnames
instead of doing multiple classes into one string
Also I think doing something like should be fine:
classnames(
[buttonBaseStyle],
{
// Layout
[classnames('w-full', 'lg:max-w-max', 'py-3', 'lg:py-1')]: isMobileWidth,
....
},
....
)
from tailwindcss-classnames.
That's exactly what I settled on for the moment :)
This should be a great middle ground for the moment.
Tooltips that show in what css the classes result are not to be expected in general, correct?
from tailwindcss-classnames.
Tooltips that show in what css the classes result are not to be expected in general, correct?
That is correct. the issue for tracking this is here: #10. But it's not supported yet in TS (microsoft/TypeScript#38106).
I am still somewhat confused about how to get my custom classes in. I will need to learn more about Typescript and come back to this.
Thank you for the help @muhammadsammy, much appreciated!
You are welcome. Thank you!
from tailwindcss-classnames.
Closing due to inactivity. Please feel free to reopen if you have more questions!
from tailwindcss-classnames.
I am new to typescript in general so please excuse, if that's an superficial question.
So the basic workflow would be to generate types based on my tailwind.config.js and then:
import { classnames ] from "path/to/generated/file"
const buttonStyling = (isAddedToCart: boolean, colorScheme: string) =>
classnames({
// Base style
// blue
"bg-gb-600 text-white focus:outline-none":
isAddedToCart && colorScheme === "blue",
"bg-gb-400 hover:bg-gb-600 text-white focus:outline-none":
!isAddedToCart && colorScheme === "blue", })
What am I misunderstanding here? Or would I simply import the generated file additionally, giving access to the types?
from tailwindcss-classnames.
Hi, @Hahlh!
Everything seems right except for passing multiple classnames in a single string.
A working version of the same code would be something like this:
import { classnames } from "path/to/generated/file"
const buttonStyling = (isAddedToCart: boolean, colorScheme: string) =>
classnames(
// These are always added
"text-white",
"focus:outline-none",
// One is selected based on the condition
isAddedToCart && colorScheme === "blue"
? "bg-gb-600"
: "bg-gb-400",
// Only added for certain condition
{ ["hover:bg-gb-600"]: isAddedToCart && colorScheme === "blue" }
)
or even better:
classnames(
// These are always added
"text-white",
"focus:outline-none",
// One is selected based on the condition
isAddedToCart && colorScheme === "blue"
? "bg-gb-600"
-- : "bg-gb-400",
++ : classnames("bg-gb-400", "hover:bg-gb-600"),
-- // Only added for certain condition
-- { ["hover:bg-gb-600"]: isAddedToCart && colorScheme === "blue" }
)
from tailwindcss-classnames.
Hey @muhammadsammy !
Thank you for your answer. I would really like to avoid ternaries with single classNames as this would lead to the same conditional mess I have been in before. Why is passing multiple classNames considered problematic?
This seems to work fine:
const buttonBaseStyle = classnames(
"flex items-center flex-shrink-0 justify-center px-5 lg:px-3 focus:outline-none rounded-md transform transform-colors duration-150 text-sm lg:text-xl roboto tracking-wider"
)
const buttonStyling = (
isAddedToCart: boolean,
colorScheme: string,
isMobileFullWidth: boolean
) =>
classnames(
[buttonBaseStyle],
{
// Layout
"w-full lg:max-w-max py-3 lg:py-1": isMobileFullWidth,
"py-2 lg:py-1 max-w-max": !isMobileFullWidth,
},
{
// Color Schemes
// blue
"bg-gb-600 text-white focus:outline-none":
isAddedToCart && colorScheme === "blue",
"bg-gb-400 hover:bg-gb-600 text-white focus:outline-none":
!isAddedToCart && colorScheme === "blue",
// red
"!bg-epRed-800 text-white focus:outline-none":
isAddedToCart &&
(colorScheme === "red" || colorScheme === "explorer"),
"bg-epRed-600 hover:bg-epRed-800 text-white focus:outline-none":
!isAddedToCart &&
(colorScheme === "red" || colorScheme === "explorer"),
// explorer
// "!bg-epRed-800 text-white focus:outline-none":
// isAddedToCart && colorScheme === "explorer" ,
// "bg-epRed-600 hover:bg-epRed-800 text-white focus:outline-none": !isAddedToCart && colorScheme === "explorer",
// late-summer
"!bg-lsRed-700 text-white focus:outline-none":
isAddedToCart && colorScheme === "late-summer",
"bg-lsRed-500 hover:bg-lsRed-700 text-white focus:outline-none":
!isAddedToCart && colorScheme === "late-summer",
// flashlight
"!bg-flYellow-700 text-white focus:outline-none":
isAddedToCart && colorScheme === "flashlight",
"bg-flYellow-500 hover:bg-flYellow-700 text-white focus:outline-none":
!isAddedToCart && colorScheme === "flashlight",
// verry-berry
"!bg-vbViolett-900 text-white focus:outline-none":
isAddedToCart && colorScheme === "verry-berry",
"bg-vbViolett-700 hover:bg-vbViolett-900 text-white focus:outline-none":
!isAddedToCart && colorScheme === "verry-berry",
// high-seas
"!bg-hsBlue2-300 text-white focus:outline-none":
isAddedToCart && colorScheme === "high-seas",
"bg-hsBlue2-500 hover:bg-hsBlue2-300 text-white focus:outline-none":
!isAddedToCart && colorScheme === "high-seas",
// eat-my-style
"!bg-emsBlue-900 text-white focus:outline-none":
isAddedToCart && colorScheme === "eat-my-style",
"bg-emsBlue-700 hover:bg-emsBlue-900 text-white focus:outline-none":
!isAddedToCart && colorScheme === "eat-my-style",
}
)
...
return (
<button
className={buttonStyling(isAddedToCart, colorScheme, isMobileFullWidth)}
onClick={() => handleAddtoCart(1)}
>
....
And I feel that it is easy to understand, easy to change and easy to write. Would you disagree?
Using ternaries and single classNames would simply move what I am trying to avoid into a different place while not allowing me to use Headwind and Tailwind Intellisense (but adding of course the awesome typescript support).
Am I missing something here or am I approaching this the wrong way?
Also using single classNames would lead to an incredible amount of statements; you surely must mean that another way, correct?
from tailwindcss-classnames.
I see. That's a shame. I will have to try to find a hybrid solution or to drop the typescript support / validation for this for the moment. My main goal atm is finding a clean solution for all the complex conditional styling. After that I will work to put validation on top.
But it should be possible to pass the in wrapped in an additional classnames(...) and gets validation etc back, correct?
from tailwindcss-classnames.
I am still somewhat confused about how to get my custom classes in. I will need to learn more about Typescript and come back to this.
Thank you for the help @muhammadsammy, much appreciated!
from tailwindcss-classnames.
Related Issues (20)
- Move `vertical-align` values to config file instead of hard-coding HOT 1
- Build is missing negative value classnames HOT 2
- CLI error on version 3.0.0 HOT 3
- CI: npm publish is failing on the ci
- Remove colors.js or pin it to 1.4.0 HOT 1
- Missing color from TailwindCSS. HOT 5
- Missing support for stacking pseudo classes HOT 5
- Custom screen sizes in config file not working HOT 2
- Missing 'group' helper? HOT 3
- idea: function helpers or generics for stacked modifiers HOT 2
- No generated type for 'ring-inset'
- darkMode: 'class' in tailwind.config.js not supported
- Bundle size increased after version 3.0.1 HOT 1
- ClassnameGenerator indexing after filter when generating colors
- Negative value in classname and Outline offset.
- Config with Preset Fail to Generated with CLI HOT 1
- Try to merge similiar utility functions
- Container Queries
- Support v3.1.0
- Make using exactOptionalPropertyTypes TS option easier
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss-classnames.