Cisc288 Tailwindnpm

SpringfieldCollege-MPCS

Download

CISC288-TailwindNPM

Instructions

** Clone Repository **

git clone https://github.com/SpringfieldCollege-MPCS/CISC288-TailwindNPM.git
cd CISC288-TailwindNPM

** Create package.json file and src file(s) **

npm init -y- create a package.json file
npm install -D parcel - install parcel as a development dependency
mkdir src - create the the src directory
touch src/index.html - create the first html file
touch src/index.css - create the first css file

** Install Tailwind CSS and PostCSS **

npm install -D tailwindcss postcss - Installs tailwind and postcss
npx tailwindcss init - creates your tailwind configuration file
touch .postcssrc - Create an empty configuration file for postcss.

Edit your .postcssrc file to be this: 1.

{
    "plugins": {
        "tailwindcss": {}
    }
}

** Edit the HTML File and CSS File **

Edit your src/index.html file: 1.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="./index.css" rel="stylesheet">
    </head>
    <body>
        <h1 class="text-3xl font-bold underline">
            Hello world!
        </h1>
    </body>
</html>

Edit your CSS File

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

*** Run Software ***

npm parcel src/index.html

Top categories