Tailwind Back to CSS

Here's an example of how to convert the CSS stylesheet to Tailwind CSS classes:

import React from "react";

const TechChart = ({ techCheckArray }) => {
  return (
    <div className="flex flex-wrap">
      {techCheckArray.map((item, index) => (
        <div key={index} className="flex flex-col mr-4 mb-4 w-56 h-64 rounded-lg bg-gray-100 p-4">
          <div className="text-lg font-bold mb-2">{item.tech}</div>
          <div className="flex-grow">
            {item.techCompanies.map((company, index) => (
              <div key={index} className="text-sm mb-1">{company}                        </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default TechChart;

Instead of using CSS classes, we use Tailwind CSS utility classes to style the chart. The flex and flex-wrap classes are used to create a flex container for the bars, and flex-col, mr-4, mb-4, w-56, h-64, rounded-lg, bg-gray-100, and p-4 are used to style the bars themselves.

text-lg, font-bold, mb-2, text-sm, and mb-1 are used to style the technology name and the list of companies.

Note that you may need to adjust the styles or add additional classes to achieve the exact look you want.

Back to CSS

Here we have an object that maps each Tailwind CSS class used in the TechChart component to the corresponding CSS key-value pairs:

const tailwindStyles = {
  "flex": {
    "display": "flex",
  },
  "flex-wrap": {
    "flex-wrap": "wrap",
  },
  "flex-col": {
    "flex-direction": "column",
  },
  "mr-4": {
    "margin-right": "1rem",
  },
  "mb-4": {
    "margin-bottom": "1rem",
  },
  "w-56": {
    "width": "14rem",
  },
  "h-64": {
    "height": "16rem",
  },
  "rounded-lg": {
    "border-radius": "0.5rem",
  },
  "bg-gray-100": {
    "background-color": "#f5f5f5",
  },
  "p-4": {
    "padding": "1rem",
  },
  "text-lg": {
    "font-size": "1.125rem",
  },
  "font-bold": {
    "font-weight": "700",
  },
  "mb-2": {
    "margin-bottom": "0.5rem",
  },
  "text-sm": {
    "font-size": "0.875rem",
  },
  "mb-1": {
    "margin-bottom": "0.25rem",
  },
};

This object maps each Tailwind CSS class to a nested object with the corresponding CSS property and value as key-value pairs.

Note that this is just an example, and the specific CSS properties and values may vary depending on your specific use case and design. It's important for you to incorporate time into your priorities to memorize the Tailwind classes. Once you got those down, you'll be flying 👍.

Enjoy and never hesitate to hit me up with questions, comments, jobs, or anything tech related!!! Please ❤️ if you find value and subscribe to the newsletter for more articles about React, Web Development, AI-Language Models (ChatGPT), React Native, Typescript, TailwindCSS, Tutorials, Learning Aids, and more!!!

Jon Christie

jonchristie.net