Created responsive Discord Website using Tailwind CSS, HTML and JavaScript.
-
Fork this repository.
-
Clone it to your computer
git clone https://github.com/your-username/Discord-Clone.git
-
Navigate to the project folder
cd Discord-Clone
-
(to run commands "nodejs" and "Tailwind" setup should be already installed) If not then,
(IGNORE step 5 if already installed)
-
first download Nodejs then -> create a folder and open it in VScode or any code editor
-> now open terminal in Vscode and type
npm init
-> in package name : tailwind_demo
-> in description : Tailwind
-> now just "enter" till terminal shows
Now in terminal type following commands (continuation of step 5)
npm i vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
-> now create a file in same(parent folder) with name: postcss.config.js
-> now paste below content in this postcss.config.js
file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
-> now in file tailwind.config.js
(delete all previous data and paste :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: { <br>
extend: {},
}, <br>
plugins: [],
}
-> now open file package.json
-> in "scripts" in new line add
"start": "vite"
-> now create a file main.css
-> now add following code in main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
-> now create a file index.html
and link css file in HEAD Tag
e.g:
<link rel="stylesheet" href="./main.css">
-> now in Terminal type :
npm start
you will see this :
-> now CLICK on this https link to start live server