joplin-notes/joplin notion extension/Web Development/CSS/Tailwind/Intro and Setup.md

Intro and Setup https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw

• Css framwork made of utility classes and are much lower level than Bootstrap, Materialize etc for improved flexibility   Installation
• npm init -y to create package.json base file and then npm i tailwindcss postcss autoprefixer to install these modules locally   How it works in src all the classes of tailwind and importted and tailwind script compiles it to output public style.css files which is interpretated by browser. We can also add our styles in src file too but that is not needed often  

Setup

• Create directory named src and public and inside src add style.css and add followiing code

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

• Also do npx tailwindcss init and add following in tailwind.config.js

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./public/**/*.{html,js}"],
    theme: {
  	extend: {},
    },
    plugins: [],
  };
  
  

  If html file is int public folder then it is public/** ... . if its in src then it is src/**..
• In package.json under scripts section add the following script "build-css": "tailwindcss build src/styles.css -o public/styles.css"
• Now run npm run build-css to generate style.css at public folder. this public folder may have index.html file too  
• Without npm, in order to use tailwind simply add following cdn link <link href= "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>

also make sure to install this if there are problems npm i tailwindcss@3.4.17 --save-dev