Dynamically build classnames in TailwindCss

by

So after finding out that this way of working is not recommended and that JIT doesn’t support it (Thanks to the generous commenters). I have changed the approach to a more ‘config’ based approach.

Basically I define a const with the basic configuration for the different props and apply those to the component. It’s a bit more maintenance work but it does the job.

Here is the example of a config. (Currently without typing) and up for some better refactoring but you’ll get the idea.

const buttonConfig = {
  // Colors
  primary: {
    bgColor: 'bg-primary-500',
    color: 'text-white',
    outline:
      'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10',
  },
  secondary: {
    bgColor: 'bg-secondary-500',
    color: 'text-white',
    outline:
      'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10',
  },

  // Sizes
  small: 'px-3 py-2',
  medium: 'px-4 py-2',
  large: 'px-5 py-2',
};

Then I just apply the styling like so:

  <motion.button
    whileTap={{ scale: 0.98 }}
    className={`
    rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none
    ${buttonConfig[size]}
    ${outlined && buttonConfig[color].outline}
    ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {children}
  </motion.button>

More Related Contents:

  1. Next Image not taking class properties
  2. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  3. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  4. How to access files uploaded to the public folder in Next.js?
  5. Can’t import SVG into Next.js
  6. How to use template literals in tailwindcss to change classes dynamically?
  7. NextJS environment variables aren’t working
  8. Next.js – Error: only absolute urls are supported
  9. Target Active Link when the route is active in Next.js
  10. Nextjs: Unable to load images from static folder
  11. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  12. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  13. How to setup i18n translated URL routes in Next.js?
  14. NextJs CORS issue
  15. How does the revalidate process in Incremental Static Regeneration work?
  16. How to type a page component with props in Next.js?
  17. Conditionally set background color in React component with Tailwind CSS
  18. How to hash CSS class names in Nextjs?
  19. Persistent navigation in a NextJs _app
  20. How to dynamically import non-React client side libraries in Next.js?
  21. React and Tailwind CSS: dynamically generated classes are not being applied
  22. Warning: Prop `className` did not match. when using styled components with semantic-ui-react
  23. Loading Screen on Next.js page transition
  24. Next.js router is returning query parameters as undefined on first render?
  25. How to detect window size in Next.js SSR using react hook?
  26. Unable to load images from static folder
  27. Get URL pathname in nextjs
  28. How to handle login failed error in NextAuth.js?
  29. deploying create-react-app to heroku with express backend returns invalid host header in browser
  30. How to bundle a React app to a subdirectory on a server?

Leave a Comment