first-next-tailwind-app: A CSS repository from rominalodolo

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Install Tailwind

Read the documentation on the Tailwind Next.js installation

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Working Next Project

Deleting the standard template to play with Tailwind

Creating Hello world to play with in styling

TAILWIND DOCUMENTATION

Playing around with changing the project with Tailwind

Trying out different styling - Adding my own custom colors In the tailwind.config file you add your colors in the extend section. If you don't you override the tailwind styling library.

Adding a border and custom colours

You can create your own custom plugins to add into your websites.

You can add tailwind custome styles directly in your class like this bg-[#bada55]

If you want to override, have more contorl/POWER you can use the @layers directive to add styles to Tailwind's base components and utilities You do this in the Global.css file

@layer utilities {
  .bg-brand-gradient { /* ... */ }
}

You can also chain the classes in the @apply in @layer when you clear the classes on your page.tsx file

You can use multiple CSS files and you can mention them in the postcss.config.js file in the plugins section. Plugins are your javascript functions which help you write CSS in js.

Typography

So we can see the headers are the same size We need to manually change these elements

Now we can see some styling to the p tag:

Adding the different sizing:

You can also import your own fonts or change the sizing of your fonts. You can customise.

Break all class is helpful when responsive design to break each word when the box size changes.

rominalodolo/first-next-tailwind-app