react talwind

index.css

@import "tailwindcss";

@theme {

  --deepblue-500:#023047;

}

/*utility class*/

.bg-deepblue{

  background-color: var(--deepblue-500);

}

@utility container{

  padding:20;

  margin:auto;

  max-width:1280px

 

}

.learn {

  @apply

  border-2 py-6 text-red-500

}

app.jsx 

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

 

  return (

    <>

    <div className='bg-deepblue container'>

      <h1 className='text-3xl font-bold text-white'>good morning radhe</h1>

    </div>

    <h1 className='bg-amber-300 text-2xl font-light'>hi radhe</h1>

    {/* border will be same as text color */}

    <button className='text-green-300 border-4 p-5'>click here</button>

     {/* placeholder as text color opacity 50 */}

     <input type="text" name="nm" id=""

     className='learn'

     placeholder='enter name' />

     <div className='flex justify-between'>

      <div className='h-16 w-16 rounded-full bg-blue-500'></div>

      <div className='h-16 w-16 rounded-full bg-blue-500'></div>

      <div className='h-16 w-16 rounded-full bg-blue-500'></div>

     </div>

     <div className="grid grid-cols-3 gap-2 mt-3">

      <div className='bg-violet-500 h-12'></div>

      <div className='bg-violet-500 h-12'></div>

      <div className='bg-violet-500 h-12'></div>

     </div>

     </>

  )

}

export default App