How can i turn my HTML,CSS,JS Website into nextjs and tailwind css?

Unanswered

American black bear posted this in #help-forum

Open in Discord

American black bearOP

2023-09-04T19:26:49.000Z

i really want to do it.

100 Replies

Ashy Storm-Petrel

2023-09-04T19:27:44.000Z

HTML can stay the same but the css and javascript you have to redo it with the tailwind and react because it's different

American black bearOP

2023-09-04T19:28:25.000Z

thanks, i converted my css to tailwind. and the js too. the js code is my script.js. im just struggling with how to use script and styles

Ashy Storm-Petrel

2023-09-04T19:29:05.000Z

i wouldn't suggest using vanilla JS but you can do that there's Script in nextjs where u can add the javascript

American black bearOP

2023-09-04T19:29:42.000Z

how about i write the script in nextjs

Ashy Storm-Petrel

2023-09-04T19:30:00.000Z

import Script from "next/script"

you can add script tag to nextjs app

American black bearOP

2023-09-04T19:30:19.000Z

@American black bear how about i write the script in nextjs

Ashy Storm-Petrel

2023-09-04T19:30:27.000Z

yes you can write in React

American black bearOP

2023-09-04T19:30:41.000Z

/* Import Tailwind CSS */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body {
  @apply bg-gray-900 text-white font-mono min-h-screen overflow-auto scroll-smooth;
  margin: 0;
  padding: 0;
}

/* Scrollbar styles */
::-webkit-scrollbar {
  @apply w-10;
}

::-webkit-scrollbar-track {
  background: #2e3440;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-700;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-900;
}

.container {
  @apply flex items-start justify-start h-screen p-10;
}

.content {
  @apply text-left;
}

.title {
  @apply text-4xl font-bold mb-8;
}

.description {
  @apply text-3xl mb-10;
}

.text {
  @apply text-xl mb-12;
}

@media (max-width: 768px) {
  .title {
    @apply text-3xl;
  }

  .description {
    @apply text-xl;
  }

  .text {
    @apply text-lg;
  }

  .contact {
    @apply leading-tight;
  }
}

.projects-section {
  @apply mt-8;
}

.projects-title {
  @apply text-xl text-black mb-2;
  color: #000000;
  margin-bottom: 10px;
}

.project-box {
  @apply flex items-center mb-4 p-4 rounded-lg bg-purple-800 shadow-md;
}

.project-box a {
  @apply text-white w-full h-full;
}

.project-details {
  @apply flex flex-col text-white;
}

.project-name {
  @apply font-bold;
}

.project-description {
  @apply mt-1 text-sm;
}

.song-name {
  color: rgb(125, 219, 125);
}

.artist-name {
  color: rgb(204, 100, 190);
}

does this count as tailwind? im new

Ashy Storm-Petrel

2023-09-04T19:31:08.000Z

Not really the point of tailwind is to never use CSS file in the first place

so the css is on the HTML element

for example

<div className="w-10 h-10 bg-red-500"></div>

to make box that's red

American black bearOP

2023-09-04T19:32:14.000Z

but it can have style tags in it, right?

Ashy Storm-Petrel

2023-09-04T19:33:29.000Z

the problem with css files is that it is headache to watch your old CSS file and understand the stuff happening and go back and forth between 2 files so tailwind makes the style same as HTML so you don't need to go to another file

American black bearOP

2023-09-04T19:33:49.000Z

thats cool

so i can just put the styles in my html code with tailwind

using tags

Ashy Storm-Petrel

2023-09-04T19:34:17.000Z

this is really helpful in large files or project you haven't worked on (i've spent some hours just to understand css of different project)

yes using class and tailwind is going to take care of the rest

American black bearOP

2023-09-04T19:34:52.000Z

and

i understand the codes and ...

but i dont know where to put them

like should i create indexhtml

Ashy Storm-Petrel

2023-09-04T19:36:10.000Z

exmaple you got

.container {
  @apply flex items-start justify-start h-screen p-10;
}

tailwind already has one so all you need is

<div className="container p-10 flex items-start justify-start h-screen"></div>

American black bearOP

2023-09-04T19:36:42.000Z

it's cool

can i send a pastebin link to you
just wanna make sure if my code is ok ðŸ˜…

Ashy Storm-Petrel

2023-09-04T19:37:34.000Z

sure

American black bearOP

2023-09-04T19:37:36.000Z

https://pastebin.com/mvyPzSPM

Ashy Storm-Petrel

2023-09-04T19:38:10.000Z

why not use codepen?

American black bearOP

2023-09-04T19:38:33.000Z

good idea

Ashy Storm-Petrel

2023-09-04T19:38:52.000Z

https://codepen.io/

American black bearOP

2023-09-04T19:39:23.000Z

signing up

https://codepen.io/ycicmagc-the-bold/pen/wvRzRQP

it seems alright to me

Ashy Storm-Petrel

2023-09-04T19:40:55.000Z

yup looks good

American black bearOP

2023-09-04T19:41:20.000Z

so i should put it in app/page.js?

Ashy Storm-Petrel

2023-09-04T19:41:23.000Z

use Prettier to format your code

American black bearOP

2023-09-04T19:41:44.000Z

okay

@American black bear so i should put it in app/page.js?

Ashy Storm-Petrel

2023-09-04T19:41:52.000Z

yes you can

American black bearOP

2023-09-04T19:42:08.000Z

and my script file? (its going to be nextjs)

Ashy Storm-Petrel

2023-09-04T19:42:24.000Z

if you want to add Navbar or Footer do it layout.js

@American black bear and my script file? (its going to be nextjs)

Ashy Storm-Petrel

2023-09-04T19:42:41.000Z

you write your script inside the page.js you don't import anything

and to make stuff interactive you use "use client"

btw good for you knowing all of this at the age of 14

@Ashy Storm-Petrel btw good for you knowing all of this at the age of 14

American black bearOP

2023-09-04T19:43:21.000Z

thanks

can i use google fonts to import the fonts, with the tags? or its something else?

Ashy Storm-Petrel

2023-09-04T19:45:59.000Z

nextjs has google fonts

in layout.js

import { Inter, Roboto_Mono } from "next/font/google" 

const font = Inter({
  subsets: ["latin"], // The Language that trade it
})

  <html lang='en' className={`${roboto_mono.variable}`}>
<body>
{children}
<body>
</html>

American black bearOP

2023-09-04T19:47:28.000Z

Ashy Storm-Petrel

2023-09-04T19:47:39.000Z

you can put it has variable or make the whole HTML page this font

American black bearOP

2023-09-04T19:47:56.000Z

https://notarya.netlify.app

is it possible that

i make my nextjs website like my old website?

hmm

Ashy Storm-Petrel

2023-09-04T19:48:23.000Z

sure that's possible

it would be very simple with React

American black bearOP

2023-09-04T19:50:09.000Z

i just cant ðŸ˜

i wish chatgpt could do it

Ashy Storm-Petrel

2023-09-04T19:50:28.000Z

it's alright it's better for you to do it to learn

American black bearOP

2023-09-04T19:50:32.000Z

yeah

Ashy Storm-Petrel

2023-09-04T19:50:40.000Z

here's a exmaple

American black bearOP

2023-09-04T19:50:57.000Z

you sure i put

import { Inter, JetBrains_Mono } from "next/font/google" 

const font = Inter({
  subsets: ["latin"], // The Language that trade it
})

  <html lang='en' className={`${JetBrains_Mono.variable}`}>
<body>
{children}
<body>
</html>

in layout.js?

Ashy Storm-Petrel

2023-09-04T19:51:52.000Z

No just edit what you already have

with stuff you're missing

nextjs new project should already done that

American black bearOP

2023-09-04T19:52:44.000Z

so this is my page.js
https://codepen.io/ycicmagc-the-bold/pen/wvRzRQP

Ashy Storm-Petrel

2023-09-04T19:53:19.000Z

the layout.js should have html and body tags

example

import "./globals.css"
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "title",
  description: "description",
}

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

American black bearOP

2023-09-04T19:54:24.000Z

ahh

thanks

Ashy Storm-Petrel

2023-09-04T19:54:41.000Z

yes and in the page.js you put what you sent

basically whatever happen in the page.js is going to be in the {children} in the layout.js

American black bearOP

2023-09-04T19:55:26.000Z

ooh

danggg

i did it

check out the pen again

Now its only the script file and im done

i know i can use the original script code but i like to write it in nextjs

Ashy Storm-Petrel

2023-09-04T19:57:38.000Z

good job

American black bearOP

2023-09-04T19:57:42.000Z

thanks

i didnt know i can use tailwind this easily

Ashy Storm-Petrel

2023-09-04T19:58:23.000Z

yah very easy after it gets setup

you're very young i'm proud of the stuff you've made! i also haven't seen some of the stuff you made in ur website like the discord status

American black bearOP

2023-09-04T20:00:14.000Z

yeah i didnt write the script yet

Ashy Storm-Petrel

2023-09-04T20:00:14.000Z

very good start you're going to be big when you grow up

American black bearOP

2023-09-04T20:00:30.000Z

thanks

i still didnt figure out how to use JetBrains mono font in the layout.js

@American black bear i still didnt figure out how to use JetBrains mono font in the layout.js

Ashy Storm-Petrel

2023-09-04T20:27:05.000Z

if it's on google fonts you can import it

or you can go to google fonts website and import it to the css file and use it

American black bearOP

2023-09-04T20:27:29.000Z

im just going to give it up

cant make it exactly like notarya.netlify.app

Ashy Storm-Petrel

2023-09-04T20:27:51.000Z

you want me to show you

American black bearOP

2023-09-04T20:28:13.000Z

yeah

Ashy Storm-Petrel

2023-09-04T20:28:51.000Z

add me on discord i'll share my screen

not-milo.tsx

2023-09-04T21:07:26.000Z

I suggest you keep the discussion here and not in your dms since other users may benefit from it too

American black bearOP

2023-09-04T22:08:05.000Z

alright