initial

joplin notion extension/Web Development/React/Tailwind/Initialization.md

@@ -0,0 +1,69 @@
+Initialization
+
+-  For React :
+  https://tailwindcss.com/docs/guides/create-react-app
+    - `npm i -D tailwindcss` or `npm i  tailwindcss -save-dev`
+    - `npx tailwindcss init`to create `tailwind.config.js`
+	- Configure `tailwind.config.js`
+		```js
+		/** @type {import('tailwindcss').Config} */
+		module.exports = {
+		  content: [
+			"./src/**/*.{js,jsx,ts,tsx}",
+		  ],
+		  theme: {
+			extend: {},
+		  },
+		  plugins: [],
+		}
+		```
+	- Add the `@tailwind` directives for each of Tailwind’s layers to your `./src/index.css` file.
+	     ```css
+	    @tailwind base;
+      @tailwind components;
+		@tailwind utilities;
+	   ```
+	 - Start your build process `npm run start`
+- For Nextjs 
+  https://tailwindcss.com/docs/guides/nextjs
+  - `npm install -D tailwindcss postcss autoprefixer`
+  - `npx tailwindcss init -p` to generate `tailwind.config.js` and `postcss.config.js`
+  - Configuring `tailwind.config.js`
+    ```js
+	/** @type {import('tailwindcss').Config} */
+	module.exports = {
+	  content: [
+		"./app/**/*.{js,ts,jsx,tsx,mdx}",
+		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
+		"./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+		// Or if using `src` directory:
+		"./src/**/*.{js,ts,jsx,tsx,mdx}",
+	  ],
+	  theme: {
+		extend: {},
+	  },
+	  plugins: [],
+	}
+	```
+  - rest all same as react. instead of `index.css`, use `globals.css` for nextjs
+
+### vanilla
+https://v3.tailwindcss.com/docs/installation
+
+```sh
+npm install -D tailwindcss@3
+npx tailwindcss init
+```
+
+in src/input.css
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+  and finally(for vanilla cases atleast)
+`npx tailwindcss -i ./src/input.css -o ./src/output.css --watch`
+
+