69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
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`
|
||
|
||
|