How to setup Tailwind-Elements in NextJs13?

[nosovandriy]

Does anyone have instructions for connecting the Tailwind-Elements to NextJs13?

[hellomikko]

1. Create your project
   Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

npx create-next-app@latest my-project --typescript --eslint
cd my-project

2. Install Tailwind CSS
   Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

tailwind.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure your template paths
   Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives to your CSS
   Add the @tailwind directives for each Tailwind’s layers to your globals.css file. IF your using NExtJS, you will have a global.css. Check your style folder.

global.css

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

5. Start your build process
   Run your build process with npm run dev.

npm run dev or pnpm dev or yarn dev ⬅ {pick your flavor}, mine will forever be pnpm & yarn.

I hope this will help you and anyone else. However its right here. NextJS Framework & Tailwind

[smolenski-mikolaj]

I also recomend our own installation guide: https://tailwind-elements.com/docs/standard/integrations/next-integration/

[evandroalvisi]

doesnt work... can u share a complete example?

I also recomend our own installation guide: https://tailwind-elements.com/docs/standard/integrations/next-integration/

[markjdavies]

I'd also appreciate a complete next 13 example, thank you. If it included an example of at least one of the components rendered on a page it would be really helpful.

It looks great, so I'd love to be able to get it working ❤️

[Trochonovitz]

Hi, could you let me know what exactly does not work? There are specific errors e.g. in console? Or Next giving some unpleasant warnings about imports or something?

[markjdavies]

I see that you have put a load of extra context into the example in the docs. It works nicely, it's great - love it. Thank you

[markjdavies]

Hi - thanks for your reply.

I think the trouble I'm having is just a bit of uncertainty about where exactly the snippets from the guide should go in the context of the app as a whole. The guide is great for calling out the significant parts, but I wonder if a link to a repo with a minimal example would give that bit o context that might make all the difference.

Specifically I am having trouble getting the components initialised. I have seen various errors along the way as I've tried different things, but I think my biggest uncertainty is the relationship between the component.js file and my own components or pages. The suggestion seems to be that I initialise each tw-elements component I want to use in the components.js then make a dynamic import import of that file where I use the components. Should I be exporting something from my component.js then? And then do I include that within my react component with a <Component /> tag or something?

Sorry if my question doesn't quite make sense - as I said I realise I'm missing something in my understanding

[howooking]

I am getting these warnings and unable to deploy. help plz

Attempted import error: 'initTE' is not exported from 'tw-elements' (imported as 'initTE').

Import trace for requested module:
./src/components/Navbar.tsx

./src/components/Navbar.tsx
Attempted import error: 'Collapse' is not exported from 'tw-elements' (imported as 'Collapse').

Import trace for requested module:
./src/components/Navbar.tsx

./src/components/Navbar.tsx
Attempted import error: 'Dropdown' is not exported from 'tw-elements' (imported as 'Dropdown').

Import trace for requested module:
./src/components/Navbar.tsx

[RRoussev88]

I'm getting the same warning.

"tailwindcss": "^3.2.4"
"tw-elements": "^1.0.0-beta2"

[killacan]

I am also getting the issue described above.

[PeterCha90]

me too. any solution? @smolenski-mikolaj

[PeterCha90]

@killacan @RRoussev88 @howooking I found the solution.

https://stackoverflow.com/a/76704270