Manage (Landing Page)

Technologies used:

1. HTML5
2. CSS3
3. TailwindCSS
4. JavaScript

Download & Install Editor, Application & Dependencies:

1. VSCode
2. NodeJS
3. TailwindCSS
   • Tailwind CLI (Prefer for Production)
   • Using PostCSS
   • Framework Guides
   • Play CDN

TailwindCSS dependency

npx init -y
npm npm install -D tailwindcss 

Add path to output.css file

package.json file:

"scripts": {
    "build": "tailwindcss -i ./input.css -o ./css/main.css",
    "watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
  },

Build, Compile input.css File & Watch output.css File

npm run build
npm run watch

Create TailwindCSS config file

npx tailwindcss init

tailwind.config.js

• content

content: ['./*.html'],

• theme

screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px'
    },

extend: {
    colors: {
    brightRed: 'hsl(12, 88%, 59%)',
    brightRedLight: 'hsl(12, 88%, 69%)',
    brightRedSupLight: 'hsl(12, 88%, 95%)',
    darkBlue: 'hsl(228, 39%, 23%)',
    darkGrayishBlue: 'hsl(237, 12%, 61%)',
    veryDarkBlue: 'hsl(233, 12%, 13%)',
    veryPaleRed: 'hsl(13, 100%, 96%)',
    veryLightGray: 'hsl(0, 0%, 98%)',
    }
    },

Insert link for CSS & JavaScript File in HTML File

• Header

<link rel="stylesheet" href="css/main.css">

• Body

<script src="js/script.js"></script>

Exclude directory: node_modules before pushing files and directories to main branch repository. Add directory: node_modules in .gitignore file.

Reference Links: Tailwind UI