Nuxt3,Tailwind, Postcss, sass setup

setup

# Nuxt 3 + Tailwind + Flowbite Setup With pnpm

1. Create a new Nuxt project

```bash
npx nuxi init <project-name>
```

1.1 Enable CorePack

```bash
corepack enable
```

2. Install Tailwind and dependencies

```bash
pnpm add -D tailwindcss postcss autoprefixer
```

3. Create Tailwind config file

```bash
npx tailwindcss init
```

4. Create PostCSS config file

```bash
touch postcss.config.js
```

5. Add Tailwind and Autoprefixer to PostCSS config

```js
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

6. Create Tailwind CSS file

```bash
touch assets/css/tailwind.css
```

7. Add Tailwind CSS to Tailwind CSS file

```css
/* assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

8. Import Tailwind CSS file in Nuxt app

```js
// nuxt.config.js
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});
```

9. Configure Template Paths

```js
// nuxt.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
```

10. Add Tailwind CSS to Nuxt app

```js
// nuxt.config.js
// https://nuxt.com/docs/api/configuration-css
export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css'],
});
```

11. Add Flowbite to Nuxt app

```bash
pnpm add flowbite
```

12. Require Flowbite as a plugin inside your tailwind.config.js file:

```js
// nuxt.config.js
// https://nuxt.com/docs/api/configuration-css
module.exports = {
  // other options ...
  plugins: [require('flowbite/plugin')],
};
```

13. Add Flowbite as a plugin inside tailwind.config.js file:

```js
// tailwind.config.js
// https://nuxt.com/docs/api/configuration-css
module.exports = {
  // other options ...
  plugins: [require('flowbite/plugin')],
};
```

14. Add the source JavaScript files of Flowbite to the tailwind.config.js template path:

```js
// tailwind.config.js
module.exports = {
  content: [
    // other files...
    './node_modules/flowbite/**/*.{js,ts}', // REMOVE THE DOUBLE ASTERICS TO GET RID OF DATEPICKER ERROR
  ],
};
```

15. Install Prettier

```bash
pnpm add --save-dev --save-exact prettier
```

16. Then, create an empty config file to let editors and other tools know you are using Prettier:

```bash
echo {}> .prettierrc.json
```

17. Next, create a .prettierignore file to let the Prettier CLI and editors know which files to not format. Here’s an example:
    DO NOT EXCLUDE pnpm-lock.yaml

```bash
echo "node_modules" >> .prettierignore
echo ".nuxt" >> .prettierignore
echo ".vscode" >> .prettierignore
echo ".idea" >> .prettierignore
echo ".git" >> .prettierignore
echo ".github" >> .prettierignore
echo "dist" >> .prettierignore
echo "coverage" >> .prettierignore
```

18. Run prettier on all files

```bash
npx prettier --write .
```

19.