Project
# Install Next and create the project
Let's start creating a new NextJS project:
terminal
When requested, set
next-workshop as project name (anyway you can choose the name you prefer for your project).npx is a command-line utility that comes with npm (Node Package Manager) and it's used to execute packages that are not globally installed in your system.Select all default choices:
Go to the project folder:
terminal
Now you can open the project in the favorite editor (be sure to open it in the root).
Open IDE from terminal
You can also configure your editor to open the project directly from your terminal typing:
terminal
This feature must be configured as explained in the Visual Studio Code documentation or in WebStorm Doc
Open terminal and run:
terminal
We can now open the application in http://localhost:3000
# Install Daisy
Tailwind was already installed and configured in the previous Next install process
Daisy UI is a CSS framework based on Tailwind.
We'll use it to skin buttons, cards, tables and most of our application elements.
terminal
Add daisy plugin to
tailwind.config.ts
tailwind.config.ts
# Force "Dark" Mode
DaisyUI utility classes automatically adapt to your OS theme, making your application's appearance consistent with your system's light or dark mode.
This means that the application may have a different look depending on your OS theme.
However this application will only use and support "dark" mode so we can force our application to use it by adding
data-theme="dark" to the html element of layout.tsx file:app/layout.tsx
# Clean the default content
Remove all default CSS classes from
global.css except @tailwind directive.
Add the widget-title class we'll use in application titles (especially in h1 elements):
/app/global.css
Tailwind @apply
Tailwind @apply directive allows to create a CSS class based on other Tailwind Classes.
While it’s highly recommended that you create proper template partials for more complex components, you can use Tailwind’s
@apply directive to extract repeated utility patterns to custom CSS classes when a template partial feels heavy-handed.In this case we create a
.widget-title custom class that merges all the styles of text-4xl (font size) and my-6 (vertical margin) Tailwind classes.Replace the default content from the homepage (
app/page.tsx) with the following one:/app/page.tsx
Check if Daisy works
Add a DaisyUI button to check if to verify that everything is configured correctly
/app/page.tsx
Don't worry if the screenshot below shows a different port (
3001 instead of 3000).
The reason is that I often run multiple applications at the same time with different ports
Anyway this was just a test to check if DaisyUI works.
You can now remove the button since everything should working fine.
If it does not work:
1
Verify that you have installed Daisy and configured in
tailwind.config.ts2
Kill the process and run
npm run dev againNew
Membership Plan, italian only!
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!
