Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Next application
Let's create a fresh Next application so that we can go through all the steps together.
Step 1
Create new project
Installing and configuring Tailwind CSS and TW Elements React
Step 1
Install and initialize Tailwind CSS (if you haven't already)
If you have created a new next app, then the file structure should look similar to this
Yes
, ESLint - Yes
, `src/` directory - Yes
, App Router - both examples included in this tutorial
Step 2
Install TW Elements React.
Step 3
Add the paths to all of your template files in your
tailwind.config.js
file.
Step 4
Add the @tailwind
directives for each of Tailwind’s layers to
your ./src/app/global.css
or ./src/styles/globals.css
file. There will be more rules if you picked to install tailwind when creating the next app. You can remove them if you want. If you leave them the darkmode may not work properly.
Step 5
Change the inter
font to the Roboto
font in:
-
./src/app/layout.tsx
- if chosenApp Router
-
./src/pages/_app.tsx
- without routing
Step 6
Import globally in ./src/app/layout.tsx
or ./src/pages/_app.tsx
TW Elements React CSS file (you could do it also in specific component which are using TE React).
Step 7
Go to the src/pages
folder and create a new, standalone file with name of your component (for example MyComponent.tsx
. Inside import TE React components which you want to use. Our components need to be used in client mode so let's not forget to add "use client"
before anything we do in this file.
If you see errors that say: "Attempted import error" you can try importing the components with use of next/dynamic
Step 8
Import (for example in src/app/page.tsx
) newly created component wrapping it into dynamic
import with ssr
object set to false
.
Step 9
Start the app and see if everything's fine