React Installation with Vite and Tailwind css (Steps to Installation)

-

 Step 1 : npm create vite@latest my-project -- --template react

 Step 2 : cd my-project

 Step 3 : npm install -D tailwindcss postcss autoprefixer

Step 4 : npx tailwindcss init -p

Step 5 : make changes In tailwind.config.cjs  ==> 

module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],

Step 6 :  Add this directory to index.css 

@tailwind base; @tailwind components; @tailwind utilities;

Step 7 : npm run dev

Step 8 :  Check Tailwind work or not 
export default function App() {
return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> ) }

Comments

Post a Comment

Popular posts from this blog

Insert Data In mongoDb

-
  const dbConnect = require ( ' ./mongodb ' ); const insertData = async () => {     let data = await dbConnect ();   let result = await data . insertMany (               [             { name : ' max 5 ' , brand : ' micromax ' , price : 420 , category : ' mobile ' },             { name : ' max 6 ' , brand : ' micromax ' , price : 520 , category : ' mobile ' },             { name : ' max 7 ' , brand : ' micromax ' , price : 620 , category : ' mobile ' },         ]     )   if ( result . acknowledged ){     console . log ( " data inserted " );       } } insertData ();
Read more

Class methods as an alternative Constructor

-
  class Employee: no_of_leaves = 8 def __init__ ( self , aname , asalary , arole , occu): self .name=aname self .salary=asalary self .role=arole self .occupation=occu def printdetails ( self ): return f"The Name is { self .name } . Salary is { self .salary } and role is { self .role } " @classmethod def change_leave ( cls , leave): cls .no_of_leaves=leave @classmethod def from_dash ( cls , string): # ks=string.split("-") # print(ks) # return cls (ks[0],ks[1],ks[2],ks[3]) return cls (*string.split( '-' )) harry = Employee( "Harry" , 2555 , "Instructor" , "Businessmen" ) rohan=Employee( "Rohan" , 4448 , "student" , "Businessmen" ) kartik=Employee.from_dash( "kartik-8996-student-Businessmen" ) print (kartik.occupation)
Read more