michi.vonah/nextjs
1
0
Fork 0
mirror of https://github.com/michivonah/nextjs.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

beginn to learn tailwindcss

Browse source
This commit is contained in:
Michi 2025-04-19 10:16:01 +02:00
parent 6d6dd37f72
commit 968a0b7de9
6 changed files with 180 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

121
README.md
View file

@ -1,9 +1,7 @@
# Next.js
A place for me to learn Next.js
Official Next.js docs: https://nextjs.org/docs/app/getting-started/installation
Next.js is developed & maintained by Vercel
> Next.js is developed & maintained by Vercel
## Installation (macOS)
Requirements:
@ -39,6 +37,11 @@ npx create-next-app@latest
Afterwards some questions about the project will be asked.
You can leave the settings as default.
## Upgrade to newer Next.js version
```zsh
npx @next/codemod@canary upgrade latest
```
## Run development server
```zsh
npm run dev
@ -76,8 +79,114 @@ The main function of the app or just a file is defined by `export default`.
The layout of the app is defined in `layout.js`. The content of `layout.js` is shared between all pages.
## Styling
In `global.css` some global CSS styling rules were defined. Usally this file is imported in the root layout of the app `layout.js`/`layout.jsx`/`layout.tsx`.
## Upgrade to newer Next.js version
```zsh
npx @next/codemod@canary upgrade latest
Commonly TailwindCSS is used with Next.js for easier stylings. This can be recognized in the beginning of the `global.css`-File:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
As an alternative to TailwindCSS also CSS modules can be used for styling. There you would create a own CSS file for every component which needs styling and only import those into the project. More details about that can be found in the [Next.js docs](https://nextjs.org/learn/dashboard-app/css-styling).
Additionaly there are other, less popular methods for styling your Next.js app like Sass or CSS-in-JS libraries. And, because in the end just normal CSS is rendered, you can use any styling solution you want/already know too with Next.js.
### TailwindCSS
Tailwind is a CSS framework, which enables you to style the whole website without ever leaving the HTML or Next.js code. You never have to touch a CSS file. All styling is done via predefined CSS classes.
When using VScode as Editor the [`Tailwind CSS IntelliSense`](https://marketplace.visualstudio.com/items/?itemName=bradlc.vscode-tailwindcss) should be installed. It enables autofill for Tailwind css classes aund adds preview of the css behind a class when hovering over it. It improves the development process with TailwindCSS a lot.
The styling is applied when adding a css class to an HTML object.
```jsx
<div className="fixed top-0"></div>
```
When non existing tailwind class matches the value you need, a custom value can be assigend, which will automatically be generated by tailwind on build.
```jsx
<div className="top-[-27px]"></div>
```
#### Common classes
| class | what it does |
| --- | --- |
| top-0 | top: 0; |
| left-0 | left: 0; |
| w-0 | width |
| h-0 | height |
| m-0 | margin |
| mx-auto | margin-inline: auto; |
| p-0 | padding |
| flex | display: flex; |
| h-screen | 100vh; -> viewport height |
| bg-gray-900 | background-color |
| text-white | text color |
| shadow-lg | adds a nice shadow (different variantes are available) |
| rounded-3xl | border-radius |
| transition-all | add a transition to every property that changes |
| hover:<CLASS> | Adds class on hover state |
| group | defines a parent element for a group |
| group-hover:<CLASS> | adds a class on hover over the parent of the group |
| dark:<CLASS> | only apply styling in dark mode |
Tailwind uses a custom spacing scale. The translation table can be found [here](https://gist.github.com/crswll/5d91b14373f53d66317e407bbba6d3dd).
To specify a hover state in tailwind just add a prefix of `hover:` in front of the styling class.
```jsx
<div className="hover:bg-green-600 hover:text-white"></div>
```
When having a lot of styling on a element it can make sense to create a custom css class combining thoose tailwind classes. This can be done by adding the following to `globals.css`:
```css
@layer components{
.sidebar-icon{
@apply relative flex items-center justify-center
h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
bg-gray-800 text-green-400
hover:bg-green-600 hover:text-white;
}
/* more custom classes... */
}
```
With `@apply` other css classes can be applied to an element.
With a group in tailwind its possible to change the state of an child based on the parent like on hover over the parent. But groups don't work when using `@apply` in css.
The class `group` has to be added to the parent element. Then a connected hover action can be added to the child via `group-hover:<CLASS>`.
Example:
```jsx
<div className="sidebar-icon group">
{icon}
<span className="sidebar-tooltip group-hover:scale-100">
{text}
</span>
</div>
```
### Clsx
`clsx` is a library which adds the possibility to toggle css classes based on JS conditions. This is useful to change a styling depending on the value of a state.
## React Icons
React Icons is a easy way to import the most popular icons into a react project.
It can be installed via npm.
```zsh
npm install react-icons --save
```
Now the icons can be used after importing them. Each icon is a custom react component.
```jsx
import { FaPlay } from "react-icons/fa";
<FaPlay />
```
## Ressources
- [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation)
- [Next.js React Foundations Course](https://nextjs.org/learn/react-foundations)
- [Next.js Dashboard App Course](https://nextjs.org/learn/dashboard-app)
- [Tailwind in 100 Seconds](https://youtu.be/mr15Xzb1Ook)
- [Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar](https://youtu.be/pfaSUYaSgRo)