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

Initialization

• For React : https://tailwindcss.com/docs/guides/create-react-app
  • npm i -D tailwindcss or npm i tailwindcss -save-dev
  • npx tailwindcss initto create tailwind.config.js
  • Configure tailwind.config.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.

    @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

    /** @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

npm install -D tailwindcss@3
npx tailwindcss init

in src/input.css

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

and finally(for vanilla cases atleast) npx tailwindcss -i ./src/input.css -o ./src/output.css --watch