CARA MENYUSUN FILE/FOLDER ANDA DI REACT + TAILWIND-CSS DENGAN CARA MUDAH

1. Siapkan Proyek React Anda, dengan Dokumentasi React.Js resmi dari tim React atau lakukan dengan cara VITE .
2. Instal TailwindCss di Proyek Bereaksi Anda menggunakan Dokumentasi Resmi Tailwind . Proses ini menyisipkan dependensi penarik dalam file package.json Anda dan juga membuat dua file tambahan postcss.config.js dan 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. File saya dibagi untuk berbagai keperluan, saya tahu di mana menemukan gaya saya dengan cepat ketika saya perlu memperbarui atau mengubah dan hal-hal yang diperlukan.
2. Komponen saya tetap bersih tanpa terlalu banyak kelas yang diterapkan pada bagian tertentu.
3. Semua kelas berada dalam file terpisah.