# Set up UI with Tailwind, Shadcn UI, and React Icons
When initializing your Next.js application with the --tailwind flag, Tailwind CSS v3 is installed by default. However, at the time of writing this tutorial, Tailwind CSS v4 is available, offering new features and optimizations. Let's upgrade your project to use Tailwind CSS v4.
Tailwind provides an official tool to help with upgrading. Run the following command to update to Tailwind CSS v4:
```bash
npx @tailwindcss/upgrade@next
```
This will:
- Update your package.json to include the latest Tailwind CSS version.
- Adjust your `postcss.config.mjs` to ensure compatibility with v4 features.
To keep your styles organized, first, create `src/styles` folder:
```bash
mkdir src/styles
```
Next, move the existing `globals.css` file into the newly created `src/styles` folder:
```bash
mv src/app/globals.css src/styles/globals.css
```
In the `src/styles/globals.css` file, set the content to ensure it imports Tailwind CSS properly:
```css
@import "tailwindcss";
```
In the `src/app/layout.tsx` file, update the import statement for global styles to reflect the new location:
```typescript
import '@/styles/globals.css';
```
To format your code according to Tailwind's best practices, make sure Prettier and the Tailwind CSS plugin are installed:
```bash
pnpm install -D prettier prettier-plugin-tailwindcss
```
In your `.prettierrc` file, make sure to add the Tailwind CSS plugin:
```json
{
"plugins": ["prettier-plugin-tailwindcss"],
...
}
```
Remove any unused content in the `tailwind.config.ts` file and keep only the necessary configuration for your project. Specifically, ensure that it only includes configuration for the `./src/app/**/*` path.
Update your `tailwind.config.ts` file to the following:
```typescript
import type { Config } from 'tailwindcss';
export default {
content: ['./src/app/**/*.{js,ts,jsx,tsx,mdx}'],
} satisfies Config;
```
>>> https://tailwindcss.com/docs/styling-with-utility-classes
---
[Next](https://hackmd.io/9uxoXPOxTMSNi95NLEYmvQ)
[Home](https://hackmd.io/9GoEP2IbT6SIJQHOf03PbA)
Sign in with Wallet
Connect another wallet