DEV Community

Cover image for Build a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM

Build a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM

Francisco Mendes on June 26, 2022

When we create a TypeScript project that has both a Rest Api and a web app, it becomes challenging to keep type definitions concise in the long run...
Collapse
 
brense profile image
Rense Bakker

Tailwind is evil, it pollutes your jsx code and it cannot do some of the basic stuff that UI frameworks offer these days, like media queries in js (useMediaQuery). Basically what Tailwind does is compile a huge list of classes before any js code is actually run. This means you cannot use any kind of variable value from js. The only way to do so, is by using CSS variables and change the value of those in runtime using JS. A very cumbersome approach, thats very difficult to understand for people who didnt write the code (or if you dont work on the project for a while). You cannot access any of the values used in Tailwind from JS, so you're completely locked into doing things "their way" (very opinionated framework). Modern UI frameworks offer ways to access the defined values, like your theme/pallete or the defined breakpoints.

All Tailwind does is create obscure classnames that you have to learn. Instead of using the CSS that you already know.

<div className="bg-white mt-4">
Enter fullscreen mode Exit fullscreen mode

If you refuse to use a modern UI framework. Why not just use the style property instead of Tailwind CSS...

<div style={{ background: 'white', marginTop: '1rem' }}>
Enter fullscreen mode Exit fullscreen mode

Oh no! It's a few characters longer! facepalm

Collapse
 
franciscomendes10866 profile image
Francisco Mendes • Edited

I think the fact that Tailwind is utility-first is ideal for creating an application, whether it's web or mobile (I've used it for several months with React Native) if you have a specific design that you want to implement and the flexibility you have is incredible .

A lot of people like to comment on the fact that we have to memorize several classes, but over time it becomes totally natural when compared to other css frameworks.

Regarding the "pollution" of jsx and making it more difficult to read, there are several ways to accomplish this, the simplest is to create a variable outside the functional component and add styles to it (but you can also use css and scss modules, twin, etc). Another aspect is that we can also create our design system with tailwind, from colors, spacing, etc.

I don't put myself as a fan of anything, because in reality the stack and libs change from project to project, but I think it's incorrect to look only at some aspects and not at others (this discussion could take days).

Collapse
 
brense profile image
Rense Bakker

but over time it becomes totally natural

CSS is already natural. Why learn something else that offers no extra benefit. Thats just arrogant framework behavior if you ask me. Tailwind CSS is basically saying: "We're better than the people who came up with CSS, so we're just going to rename a small percentage of CSS syntax to custom classnames, cuz we're rebel bruh!"

there are several ways to accomplish this

If a framework forcefully introduces problems that you need to fix in order to stay anywhere near clean code principles, why use the framework at all... Its a bad framework. <- emphasis on period.

Another aspect is that we can also create our design system with tailwind

You can do that with modern UI frameworks aswell, most of them offer ways to define/override pretty much every aspect and actually offer good documentation on how to do so. For example in Mui: mui.com/material-ui/customization/...

And we havent even began to touch on the fact that you definitely do not want to run any a11y linting on an application using Tailwind.

The discussion only takes days because the Tailwind fanboys obsessively want to stay rebel and produce web applications that do not follow any web standard.

Collapse
 
meidkh profile image
Mohamed

I think you may find Chakra UI more suitable UI solution for you
chakra-ui.com/

Collapse
 
brense profile image
Rense Bakker

Chakra UI is very good too yes, I have more experience with Mui though.

Collapse
 
frank1003a profile image
Frank Ezene

In my opinion Chakra UI is the best UI framework.

Collapse
 
jancassio_10 profile image
Jan Cássio

Everyday a TW hater bringing JS oriented style as argument to replace CSS.

Collapse
 
brense profile image
Rense Bakker

No, I actually worked with it and discovered the many things Tailwind just cannot do, without very dirty workarounds. Also, its Tailwind that is trying to replace CSS, you're writing class names, not CSS.

Thread Thread
 
jancassio_10 profile image
Jan Cássio • Edited

I actually worked with it and discovered the many things Tailwind just cannot do, without very dirty

Like what?

you're writing class names, not CSS

You understood CSS wrong. It's all about composing classes and reuse it. You should write more reusable CSS as you can to do not repeat it again and again. Tailwind provides a shortcut to skip the writing CSS for general purpose styles and avoid a lot of duplicates.

Collapse
 
joesoeph profile image
Yusuf Fazeri

I use both, CSS Utility framework (Tailwind) and CSS Components Framework (Bootstrap, Antd, etc). In my opinion, Tailwind best fit for team who work together (frontend, backend, UI/UX), but Bootstrap or Antd fit for Fullstack Dev.

Collapse
 
kharioki profile image
Tony Kharioki

this write up assumes you're using tRPC v9.
for anyone using tRPC v10, I made a write up on how to configure yuour project. checkout this link

Otherwise thank you Francisco

Collapse
 
pwnmonkey13 profile image
Giraudo Nicolas • Edited

Super article !👏
Btw I hate haters and I love TW !
I worked with it on recents projects and I finally felt in love with !

That's said, I'm bootstrapping an NextJS app. TW and Prisma are already packed. And your article will help me deciding between graphql clients like Apollo and RPC ones like tRPC

Thanks mate

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Glad to know! 🙌 I hope you like the development experience 🤞

Collapse
 
wesleycoder profile image
Wésley Queiroz

Nice content.
It would be good to mention t3.gg so people can find more content on this stack. I imagine you got inspired by his work too.
Also in the Prerequisites section the only thing we need are Node/npm, because next is added during initialization and the other are added on the next steps.
Keep the good work.

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks for the feedback! 👊 I've been using this stack for a few months now in personal projects, it's super fast to prototype an app, but it never crossed my mind to publish an article about it. And great point to mention Theo, I definitely recommend his content, not just for this stack but for his didactic approach, he's one of the few that isn't "tutorial-ish".

Collapse
 
marcus-sa profile image
Marcus S. Abildskov

I'd suggest checking out Deepkit RPC.

Collapse
 
firozansari profile image
Firoz Ansari

Great article! This is exact tech stack I was looking for.

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Glad to know! 👊

Collapse
 
laudaccurate profile image
Laud Gilbert

Great content here. The project is minimal but it teaches many vital techniques. Thanks Mendes

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks for the feedback, this is exactly the intended result in my articles. Small examples, but with enough bases to do more 👊

Collapse
 
francisrod01 profile image
Francis Rodrigues • Edited

I've been coding this tuto and I shared it on Github here:
github.com/francisrod01/fullstack-...

I found a few mistakes in the tutorial, such as:

  • Card component import
  • @prisma/client doesn't have GroceryList component
  • Property 'setItemName' does not exist on type '[string, Dispatch>]'
  • trpc.useMutation should mention "groceries." in its reserved word

Preview:

Image description

Collapse
 
franciscomendes10866 profile image
Francisco Mendes • Edited

Thanks for the comment 💪, I already fixed the import of the components. Regarding the problems you are having with the grocery list data types, they are probably related to the lack of data types generation or a new migration.

And here square brackets should be used and not curly brackets:

const [itemName, setItemName] = useState<string>("");
Enter fullscreen mode Exit fullscreen mode
Collapse
 
francisrod01 profile image
Francis Rodrigues

Thanks, but I didn't find the solution for the import of the components, neither in the repo.

 
brense profile image
Rense Bakker

I mean along the lines of html element roles, like role=button for clickable elements for screen readers, proper aria labels for label/input relationships etc. There's a lot, more than I care to maintain myself, so having a UI framework that takes care of that for me is a big help.

 
glenhayes profile image
Glen Hayes

Wanted to throw this in the mix, headlessui.com/ which is a project from the creators of tailwind. It is a library of unstyled accessible UI components.

Thread Thread
 
brense profile image
Rense Bakker

That is a good initiative, however I am still missing the most used unaccessible elements: inputs and buttons. And how many people using Tailwind are actually using headless UI though? I reckon not many, atleast I have not seen it out in the wild yet.

 
brense profile image
Rense Bakker

You admit you used a CSS library to replace a UI component library

I did no such thing, I end up in teams sometimes where a decision was already made on what tools they want to use, usually without good justification.

Also, you're making a false dichotomy

I'm not, the Tailwind people are. Everytime I come into a team working with Tailwind, this is the exact comparison they make: we either use ant design, material ui or tailwind and then they chose Tailwind and I have to fix all their accessibility issues and explain to management why we can't deliver because we have to build our own components first, instead of reusing what already exists in so many UI component libraries out there. Infact I've even been in a team where management quite literally said they wanted to use a component library, because speed was of the essense and the team before me STILL went with Tailwind and completely ignored accessibility and wishes from management so yes... I'd say that's pretty cocky.

And the other reason why I say Tailwind and the people behind it are cocky, is because when you go to them with legitimate concerns about accessibility and clean code conventions, they don't respond to you about the topic, they just call you a hater or flat out say that you're a bad developer and you don't understand how awesome and god-like they are.

Collapse
 
r4e profile image
Richie Permana

I'm not really sure since when I'm start hating Tailwind because I need to convert a Figma into pixel-perfect web but my designer never use "Tailwind approach" for it 🤷

Also, it's kinda hard to do scaling for higher resolution (because I obviously need to use vw unit)

 
brense profile image
Rense Bakker

You're mixing CSS and JavaScript

Yes, that interpretation of seperation concerns fell out of grace some time ago. Because we found out that you can develop much faster and less error prone, if you are not religious about seperating presentation from business logic.

Seperation of concerns is still important within business logic: "Modularity, and hence separation of concerns, is achieved by encapsulating information inside a section of code that has a well-defined interface"

We also follow a rule now that says: "Keep related things together" because it makes things easier to find and understand for new devs.

If you can link me to a Tailwind implementation with prebuilt UI components for React that respect a11y. I'd be willing to give it another try.

you must be fun to work with /s.

Yes I'm definitely fun to work with. Thank you for making another attack on my person because I dare to say Tailwind is evil.

Collapse
 
deezy profile image
DEE

If you're like me who started with trpc v10, I did a little migration for this project for others to use as a starting point if you don't mind. Here😀.

Any feedback would be nice..👍🏾

 
brense profile image
Rense Bakker

I'm not sure what projects would benefit from bad accessibility and bad user experience. Design systems exist for a reason, they take a lot of work and consideration. I feel like you're quick to jump to the conclusion that using an existing design system makes it impossible to deliver a unique design according to what the business wants. I also feel like tailwind people like to pretend that its not extremely easy to customize ui component libraries like mui, that make use of material design system for example. You can make it completely custom to the point where you cant tell its based on material design system...

Yes, use the right tool for the job and also, dont reinvent the wheel.

 
brense profile image
Rense Bakker

Yes, its not a good choice for a solid and accessible component library but that is what a lot of people are using it for. The discussion I always see is: should I use ant design, material ui or tailwind... I just dont see it as a good fit anymore to the way we work these days... All designers I've worked with in the past 3 years use some design system and 9/10 times thats practically already a copy of material design system, that can very easily be implemented in existing component libraries like mui by doing some small overrides or sometimes just changing the colors and units. If the business knew that UI component libraries exist, they would never pay for developers to build their own UI component library usingTailwind CSS...

 
brense profile image
Rense Bakker

Assuming someone doesnt understand Tailwind, without any arguments is arrogant behavior. I've given plenty of examples why I think Tailwind is an evil framework.

Assuming people are dumb and/or are not using your framework properly is also pretty arrogant...

It's not a new approach we we're taught to seperate CSS from JS code in 2006 and we've since moved on to greener pastures with the introduction of modern JS frameworks and UI frameworks.

 
brense profile image
Rense Bakker

All of them. Tailwind offers zero accessibility optimizations that modern UI framework do offer

Thread Thread
 
brense profile image
Rense Bakker

No, not like utility classes. An app is more than a presentation layer...

Collapse
 
deezy profile image
DEE

Was following this TUT and:

trpc.router()

is now deprecated.

Anyone mind telling me the correct format now in the context of this TUT?

Collapse
 
francisrod01 profile image
Francis Rodrigues

Which database do you recommend for Next.js?
They say that it doesn't work well with Firebase.

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Choosing a database goes beyond choosing a web framework, that is, I think the criteria that matter most are the product (whether the database is ideal for solving the problem) and the engineering team (what is the experience of each).

To be honest, I usually go with PostgreSQL (but my opinion doesn't matter), what matters is the needs of the product and the team.

Have a nice day 👊