CÓMO ESTRUCTURAR SUS ARCHIVOS/CARPETAS EN REACT + TAILWIND-CSS DE FORMA FÁCIL

1. Configure su proyecto React, con la documentación oficial de React.Js del equipo de React o hágalo a la manera de VITE .
2. Instale TailwindCss en su proyecto React utilizando la documentación oficial de Tailwind . Este proceso inserta la dependencia de tailwind en su archivo package.json y también crea dos archivos adicionales postcss.config.js y tailwind.config.js.

theme: {
    extend: {
      colors: {
        primary: "#0B65C6",
        secondary: "#EEF1F6",
        tertiary: "#0e1133",
      },
    screens: {
      lg: { max: "1800px" },
      md: { max: "990px" },
      sm: { max: "600px" },
      xs: { max: "400px" },
    },
    fontFamily: {
      sans: ["IBM Plex Sans", "sans-serif"],
    },
  },
  plugins: [],
};

const styles = {
    whiteText: "text-white",
    blackText: "text-tertiary",
    boxClass: "flex-row md:flex-col",
    textLeft: "text-left",
    btnPrimary:
      "bg-primary mt-4 py-4 px-6 text-white text-lg minmd:text-2xl font-IBMPlex font-medium rounded-lg hover:shadow-2xl",
    section: "flex justify-center items-center p-16 sm:p-8",
    flexCenter: "flex justify-center items-center",
    featureImg: "w-20 h-20 minlg:w-40 minlg:h-40 object-contain mb-1",
   };
  
  export default styles;

import React from 'react';
import styles from '../styles/Global'

const Button = ({ assetUrl, link }) => {
  return (
    <div className={styles.btnBlack}
      onClick={() => window.open(link, '_blank')}>
      <img src={assetUrl} alt='expo_icon'
            className={styles.btnIcon} />
      <div className='flex flex-col justify-start ml-4'>
        <p className={`${styles.btnText} font-normal text-xs`}>View it in</p>
        <p className={`${styles.btnText} font-bold text-sm`}>View it in</p>
      </div>

    </div>
  )
}

export default Button

import styles from '../styles/Global'

// This imports the styles files into the button component by going a step
// backward (..) in the folder structure to find the file named Global
const Button = ({ assetUrl, link }) => {
  return (
    //This is a button component, that takes assetUrl, link as an argumment
    // and returns/render's something to the screen
  )
}
return (
    <div className={styles.btnPrimary}
      <div className='flex flex-col justify-start ml-4'>
        <p className={`${styles.btnText} font-normal text-xs`}>View it in</p>
      </div>
    </div>

export default Button;

1. Mis archivos están seccionados para varios propósitos, sé dónde encontrar mis estilos rápidamente cuando necesito actualizar o cambiar algo necesario.
2. Mis componentes se mantienen limpios sin aplicar demasiadas clases a una sección en particular.
3. Todas las clases están en un archivo separado.