tailwind-css-guide

1.First we create our next.js file (in the example we create an app called cat-app)

code source = npx create-next-app@latest cat-app cd cat-app

---

2.We configure tailwind e we initialise the tailwind config file

code source = npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

---

##importan If you get an error about babel compiler

• create a babelrc file with no extension and add the following line of code

code source = { "presets": ["next/babel"], "plugins": [] }

• replace the .eslintrc.json file content with this line of code

source code = { "extends": ["next/babel","next/core-web-vitals"] }

---

3. Copy this code inside the tailwind.config.js file

code source = module.exports = { content: [ "./pages//*.{js,ts,jsx,tsx}", "./components//*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

---

4. On global.css file add the following tailwind structure and basic css

source code = @tailwind base; @tailwind components; @tailwind utilities;

html, body { padding: 0; margin: 0; }

a { color: inherit; text-decoration: none; }

• { box-sizing: border-box; }

---

5. Delete unnecessary files

---

6.Clean the home page to look like this

source code = export default function Home() { return (

) }

---

7.Add some image on your public folder and import the images using Image components in your home page

source code =

import Image from "next/image" import cat1 from "../public/images/cat1.gif" import cat2 from "../public/images/cat2.gif" import cat3 from "../public/images/cat3.gif"

export default function Home() { return (

) }

---

8. Here an example of extra css style added

source code =

@tailwind base; @tailwind components; @tailwind utilities;

a { color: inherit; text-decoration: none; }

• { box-sizing: border-box; padding: 0; margin: 0; }

body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; }

@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

---

Guide complete