Tailwind Setup via CLI

Overview

• Practice installing Tailwind CSS for NEW projects

• Create build process for apps using Tailwind CSS

• Install Tailwind CSS using the CLI tool

• Setup repo with Node and npm package manager

1. New Repo

Create a new repo with

• Public repo

• Add README file

• Add Node .gitignore file

1. Setup Node Project with npm

• Open newly created repo in CodeSpaces

• From the Terminal

• Setup npm project with common defaults

npm init -y

• A new file named package.json will automatically be created

1. Install the Tailwind CSS package

• npm is the package manager, but does not run/execute it

• a new file named package-lock.json will automatically be created

• a new folder named node_modules will automatically be created

npm install -D tailwindcss

1. Run the Tailwind Installer

• Tailwind is downloaded but installed, but is not running or configured

• a new file named tailwind.config.js will automatically be created

npx tailwindcss init

1. Setup Folder Structure

Create these folders and files

• src/input.css

• public/index.html

• public/style.css

• public/script.js

1. Configure Tailwind

• Open tailwind.config.js

• find content : key

• modify value to

["./public/*.{html,js}"],

What is happening now? We're configure the paths the HTML template or JS components. Or "Tailwind put all the compiled code in this folder" named public

1. Import Tailwind CSS

Add the @tailwind directives

• open src/input.css

• add this code

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

1. Setup Package.json

For right now, copy all this code.

{
  "name": "Tailwind CSS Starter Kit",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "Hello 😃!", 
    "dev" : "tailwindcss -i ./src/input.css -o ./public/style.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.3"
  }
}

7. Start the Tailwind CLI build process

The shortcut we created is

npm run dev

• use npm to get the source input.css compile to style.css

• --watch for any changes on input.css , then re-compile to style.css

1. HTML. CSS. JS.

• Setup boilder plate for HTML in public/index.html

• Write all CSS in src/style.css

• Write all JS in public/script.js

1. Run Live Server

• Run Live Server on index.html

• Click on public folder to view in browser

Note: index.html is public/index.html

1. Extras

Tailwind CSS IntelliSense - Visual Studio Marketplace

Tailwind CSS Cheat Sheet

Inline fold - Visual Studio Marketplace