initial

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

@@ -0,0 +1,43 @@
+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**
+![fccce4208ab8b92759d53376c89689f6.png](../../../../_resources/fccce4208ab8b92759d53376c89689f6.png)
+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
+	```css
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+
+	```
+- Also do `npx tailwindcss init` and add following in `tailwind.config.js`
+	```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`
+