/recipe-by-tailwind

Primary LanguageCSS

Recipe by tailwind

Recipe web application by tailwindcss framework.

About tailwind

  • Low-level css framework
  • Made up of utility classes

Prerequisites

  • HTML
  • CSS

Install

  1. Install node.js
  2. Check if node and npm successfully installed:
    npm -v || npm --version
  3. Create package.json file:
    npm init -y
  4. Install tailwind library:
    npm i tailwindcss
  5. Generate tailwindcss config file:
    npx tailwindcss init
    npx tailwindcss init --full

How tailwind works

  1. Input: app.css in src directory
  2. Translate: by tailwind compiler
  3. Output: app.css in dist directory
  4. Display: reference output of app.css in index.html file
  5. Copy tailwindcss directives in app.css file

File structures

  1. node__modules: container for all packages
  2. src: container for all input files
  3. dist: container for all output files
    for example: app.css - index.html - ...