responsiveness with object using tailwind

hello guys i am trying to achieve responsiveness in tailwind with the help of js object example:-

const className={
sm:"bg-blue-300",
md:"bg-red-500",
}

const className={
sm:"bg-blue-300",
md:"bg-red-500",
}

will be converted on

const convertedClassName="sm:bg-blue-300 md:bg-red-500"

const convertedClassName="sm:bg-blue-300 md:bg-red-500"

because of dynamic class name (https://tailwindcss.com/docs/content-configuration#dynamic-class-names) i cannot write a function in javascript can anyone suggest me library which do the same thing or anything which will help me to remove this problem

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

9 Replies

Matvey•12mo ago

just write everything as a string in the first place

pradeep•12mo ago

Yeah but sometimes it becomes messy so i am wondering if i can do something about it

Matvey•12mo ago

I think UnoCSS has a mode where something like is possible

pradeep•12mo ago

Can we do something about tailwind

shiroyasha9•12mo ago

I think the cn utility function should be handy here, along with a custom function that converts it to the desired format Something like this

import clsx, { type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const obj = {
  sm: "bg-red-500",
  md: "bg-blue-500",
}
// a function that takes above object and returns a string like "sm:bg-red-500 md:bg-blue-500"
export function convertObjToTailwindString(obj) {
  return Object.keys(obj).map((key) => `${key}:${obj[key]}`).join(" ");
}

// usage

const classNames  = cn(convertObjToTailwindString(obj)

import clsx, { type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const obj = {
  sm: "bg-red-500",
  md: "bg-blue-500",
}
// a function that takes above object and returns a string like "sm:bg-red-500 md:bg-blue-500"
export function convertObjToTailwindString(obj) {
  return Object.keys(obj).map((key) => `${key}:${obj[key]}`).join(" ");
}

// usage

const classNames  = cn(convertObjToTailwindString(obj)

pradeep•12mo ago

This will not work because of https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

shiroyasha9•12mo ago

Does it not? I'm pretty sure that tailwind-merge resolves this issue. I had recently watched a video on this where they mention how tailwind-merge addresses this issue which you can checkout at https://www.youtube.com/watch?v=yeFkc7Wu1nU

ByteGrad

YouTube

Tailwind-Merge Solves 3 Big Problems & Mistakes in Tailwind CSS

Avoid these problems in Tailwind... 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Email newsletter (React + Next.js course out soon!): https://email.bytegrad.com 💻 Premium Courses: Professional JavaScript: https://bytegrad.com/co...

Matvey•12mo ago

This will not help. Classes are generated at build time and a runtime library can't help

pradeep•12mo ago

Yeah i think safelist can used here i am not sure how

Gaming

Programming

responsiveness with object using tailwind