DEV Community: Kyle - Layer6 Training

How To Install TailwindCSS In Your NextJS Project ⚡️

Kyle - Layer6 Training — Tue, 09 Aug 2022 13:31:00 +0000

Introduction

In this post, you will learn how to set up your NextJS project to use TailwindCSS as your styling utility.

Requirements

Before we get going your going to need two things:

Node JS installed on your machine. I always recommend the LTS (v16) as it has the widest amount of support and will cause you the least amount of headaches when following guides like these.
An IDE, I use VS Code

With that out of the way, lets get going!

We have two options when it comes to making a NextJS project with Tailwinds.

Option 1 (Fastest ⚡️)

One of the really nice things I've found with NextJS is they have a very nice library of "Examples" as they call them, which are essentially just a bunch of ready-to-go templates for various starting points with a project.

And in this case, they have a NextJS-with-TailwindCSS Example.

To install this example it couldn't be simpler! Run the below command in a terminal window in the file location you would like to start your new project:

npx create-next-app --example with-tailwindcss my-app

Or for yarn users:

yarn create next-app --example with-tailwindcss my-app

And then that's it! 🎉

we can now run:

cd my-app
npm run dev
or
yarn dev

and you should see the NextJS boilerplate site page in your browser

Too simple right? 🧐

Options 2 🛠

Option 2 starts the same way but we will use the base Create-NextJS command.

In your terminal run this:

npx create-next-app my-app

Next cd into the my-app folder:

cd my-app

We are going to run a few Tailwind specific commands.

The first is:

npm install -D tailwindcss postcss autoprefixer

This will install tailwindcss as a dev dependency in your "package.json" file. As well, also install postcss and autoprefixer which are core elements of how tailwindcss operates.

Next, we are going to create the tailwinds config file by running this command:

npx tailwindcss init -p

Now inside this newly created file "tailwind.config.js" we will insert a content array with all the file types in our project. Ensure to add any file types or routes that are specific to your project in order to use tailwindcss in them:

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, we will change the contents of the "./styles/css/global.css" file. You can delete all the contents of this file and replace it with the below code:

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

Final step is to start our dev server:

npm run dev
or
yarn dev

and then make a new element in our "index.js" file to test if tailwindcss is working (again you can delete all the boilerplate code). In this case, I made an H1 tag with a few tailwindcss classes to test.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

If your H1 heading shows up as larger bolded text with an underline then congrats! 🎉 Tailwindcss is working!

Now after seeing how easy it was to get Option 1 up and going you might be wondering why you would do it any other way?? Especially, if you're coming from using TailwindCSS with another framework, you know how involved the setup process can be.

Option 2 may be required if your working in a team and you need to scaffold your project from the ground up to adhere to strict environment/variable settings your team has set. Or, you are using another NextJS example, like Auth0, so you are already using the quick start function.

Either way, getting TailwindCSS going is fairly straightforward. If you have any issues getting going, you can refer to the official TailwindCSS Docs

If you enjoyed or learned something from this post please give it a like and consider following me for more! 🙏

How To Style Blogs/CMS Data Auto-Magically with Tailwind CSS 🤩

Kyle - Layer6 Training — Sun, 07 Aug 2022 22:49:44 +0000

Introduction:

Today were going to look at a Tailwind component that only Prose know about! 😂 Sorry I had to get that joke out of the way!

If you're like me and have been using Tailwind CSS for a while, even a very long time, you may still not have come across this amazing feature of the tool! I am speaking about the Typography Component and more specifically the set of Prose class elements. This collection of styling was built for large sets of HTML you may not be able to control. Maybe youve set up your website's blog using raw markdown text, or you're pulling in large amounts of text content from a CMS.

Either way, the Prose classes are here to help! 👌

Sample Project:

Naturally, we will need an example so let's get a Tailwind based project going

Were going to use the Tailwind CSS Play tool. This will get us up and going fast and make sure youre environment is identical to mine.

We will replace the default code with the snippet below. This is unformatted HTML from my latest blog post:

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">

<article class="">

<h1>5 Web Dev Platforms, Tools & Frameworks To Learn In 2022 🔥</h2>

<img src="https://blog.layer6training.com/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Funsplash%2FSyYmXSDnJ54%2Fupload%2Fv1659720841329%2Fss-CHaLc9d.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75" alt="">

<h2>1. React/NextJS </h2>

<p>Like it or lump it, Javascript frameworks have continued to take over in all aspects of web development from Web3 to traditional web apps. React and frameworks based on it have exploded in 2022 taking over from some of the other major players in the field.</p>

<p>As the tide of React rises, so do the others that are based on its component framework. This includes NextJS, a 2016 open source React-component-based framework that was created by the team at Vercel. Since its creation in 2016 the team has added a bunch of cutting-edge features geared towards edge hosting platforms like its own. In addition to NextJS's cloud edge focus, many consider the framework as a backend framework due to its many server-side features.</p>

<img src="https://nextjs.org/_next/image?url=%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage.png&w=3840&q=75" alt="">

<p>NextJS is the framework I personally have chosen for all my projects. You can read more about it here: NextJS</p>

</article>

</div>

It should look like this:

Not great right? Which were not surprised. And of course, we could just add styles like normal to each HTML element. But let's say you have a large amount of text, either from a CMS or just generally have a lot of static text content on your site. It could be very time-consuming to style by hand. This is normally one of the largest complaints hard-core CSS users have about Tailwind CSS. Not worry the Typography component is on the way!

So let's implement this.

We're going to need to add one small piece of code to our Tailwind config file. This would be the third tab along the top in our code session labeled "Config".

💡 NOTE* since we are using TailwindCSS Play we do not need to install the Typography plugin, but in a normal project you would need to install the plugin with npm install -D @tailwindcss/typography in addition to adding the below config code snippet

Add the below require line to the config tab in TailwindCSS Play:

module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Now were ready to go!

Up in the Article tag, we have an empty class element. Within the open quotes place the prose class.

<article class="prose">

and with this one class attribute added you can see weve gone from bland to wow! 🤩

I know Im really hyping up simple text styles, and that we still have further to go, but this one-step feature can be a game changer for some.

What is happening Behind The Scenes?

So if youre curious about what is happening here the creators of Tailwind CSS have worked very hard to create this prose style that takes into account the most optimal styling context for these types of text tags. Almost giving you a one=click blog styling option.

We can take this a step further and this is where the real power comes in!

So let's say we like how this is looking but would like to style our images differently. Again, instead of going through our file and adding styling to anything with an "img" tag, or by creating a custom reusable CSS class, we can simply use the prose class syntax to style all "img" tags the same way.

For example:

let's say we wanted a slight rounding effect, we would add the following class:

prose-img:rounded-lg

Now our image and any others using the "img" tag will inherit this styling:

We can also target other HTML tags using this method, like our H1 heading. I think for this blog post I would like it to be centered.

prose-h1:text-center

But let's say we want to style all our headings in our brand colors. Instead of adding a class for h1, h2, h3, etc, we can use a general class attribute called headings. This will apply a color to all of the heading types:

prose-headings:text-indigo-600

Let's check in where we're at:

<article class="prose prose-img:rounded-lg prose-h1:text-center prose-headings:text-indigo-600 p-6">

and now you can see with about 6-7 Tailwind CSS classes and one line of code we are able to style an unlimited amount of text/content.

Now just to cover the inverse situation. You may come across the scenario where you don't want to inherit the "prose" styling for whatever reason. This is also handled easily as well.

Simply use the "not-prose" class and add your styling as normal to that element!

class="not-prose"

And that's it! 👌 Now of course there is much more under the hood with this plugin and I encourage you to check out the official Tailwind CSS Docs.

If you enjoyed or learned something from this post please give it a like and consider following me for more! 🙏

5 Web Dev Platforms, Tools & Frameworks To Learn In 2022 🔥

Kyle - Layer6 Training — Mon, 01 Aug 2022 03:44:20 +0000

1. React/NextJS

Like it or lump it, Javascript frameworks have continued to take over in all aspects of web development from Web3 to traditional web apps. React and frameworks based on it have exploded in 2022 taking over from some of the other major players in the field.

As the tide of React rises, so do the others that are based on its component framework. This includes NextJS, a 2016 open source React-component-based framework that was created by the team at Vercel. Since its creation in 2016 the team has added a bunch of cutting-edge features geared towards edge hosting platforms like its own. In addition to NextJS's cloud edge focus, many consider the framework as a backend framework due to its many server-side features.

NextJS is the framework I personally have chosen for all my projects. You can read more about it here: NextJS

2. VueJS 🙏

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It was created by Evan You in 2014, who also created Nuxt.js, a Vue-based framework to build production-ready Universal (isomorphic) web applications with server-side rendering.

Vue is the alternative to React or Angular in the world of Single Page Applications (SPAs). In fact, it's not a typical SPA framework because it doesn't use the MVC pattern and thus does not have controllers or models like other frameworks do.

Vue.js aims to be simple, intuitive, and easy to learn to use for new developers. It's got a lot of great features that make it an excellent alternative to other frameworks such as React or Angular.

3. Supabase 🐘

Supabase is a new player on the block in the world of DBaaS, Database as a Service. They are going up against the likes of Firebase by Google. But Supabase has some unique features that really set it apart from other offerings. Most notably is the use of a logical database type in the form of a managed PostGreSQL DB for all customers. This differs from Firebase which uses a NoSQL base scheme.

Other features include:

DB Tables
Authentication (Email/Pass, Magic Link, & Auth Identity Providers)
Storage (images, files, etc)
Edge Functions (New )

Check them out and signup for their very generous free tier for your side projects!: Link

4. Tailwind CSS 🔥

Tailwind CSS is a utility-based modern UI framework. It uses classes instead of IDs, and the power of the class attribute to add styles to your DOM elements. This means that you dont need to think about element types or where in the document they are just add your classes where you want them. The most basic way to use Tailwind is with its global window presets, which are included by default in all projects generated with Tailwind CLI (command line interface).

TailwindCSS is a great tool for beginners to learn how to style website elements. It makes it easy to use and has a lot of documentation. Tailwind CSS allows you more flexibility than any other CSS framework out there because it doesn't have any hard rulesjust go with the flow and have fun! 🙌

5. HyGraph CMS (Formerly GraphCMS) 🎉

If you've built an app and you want to get it to market faster, then a headless CMS is the solution. Headless CMSs let you focus on your app instead of managing content. They give you the data your app needs in a structured way so that your team can focus on building out features instead of learning how to write HTML or CSS.

GraphCMS is a headless content management system. Instead of using a traditional CMS that includes an admin dashboard, GraphCMS removes the UI and gives you access to the API. This means that you can build any kind of frontend you want on top of your data-driven backend without having to rely on third parties!

GraphCMS works with most popular frameworks and is always keeping up with the latest trends in web development!

Conclusion

If you found this post helpful make sure to give it a like and follow me for more! 🙏

What is Tailwind CSS? And Why Should You Care? 🧐

Kyle - Layer6 Training — Sun, 31 Jul 2022 00:00:36 +0000

https://youtu.be/TmWIrBPE6Bc

What is Tailwind CSS and Why Should I Care? 🧐

If you've found your way to this blog post it's probably because of many tweets, posts, and potentially conversations with your friends or colleagues about this thing called Tailwind CSS? You may be coming from the traditional world of CSS or SASS styling. Or you're like me and started to learn code with Tailwind as your styling base. No matter, we are going to catch you up on what you've missed!

Tailwind was created by Adam Wathan, and it is based on the Atomic CSS methodology. Unlike Bootstrap and other similar libraries, you cannot download Tailwind and start using it right away. This is because Tailwind does not come with any built-in UI elements such as buttons or text fields these are all generated from your codebase once you have compiled your own version of Tailwind CSS. Instead of relying on predefined classes from libraries like Bootstrap, we can generate any class we want before compiling our CSS file. In this way Tailwind is more versatile than a library like Bootstrap: while there are some limitations imposed by the fact that it generates classes instead of copying them over verbatim (e.g., certain font sizes don't work well with this method), overall I think it's still worth trying out!

Tailwind CSS is a utility-based modern framework. It uses classes instead of IDs, and the power of the class attribute to add styles to your DOM elements. This means that you dont need to think about element types or where in the document they are just add your classes where you want them. The most basic way to use Tailwind is with its global window presets, which are included by default in all projects generated with Tailwind CLI (command line interface).

You might be asking yourself: "If Tailwind is a utility-based framework, and it doesn't have any built-in UI or design system, what do I use?"

The short answer is that you can create your own custom components. It's always been possible to do this through CSS variables and utility classes like [w], but tailwind makes it very easier for developers and designers to map out their designs from programs like Figma

Tailwind uses PostCSS as its preprocessor.

PostCSS is a tool for transforming styles with JS plugins, and it can be configured to run on the server and/or the client. It's useful for dynamically loading third-party CSS libraries or customizing them based on user preferences or content types. PostCSS also works with any build system or framework, so if you've ever had trouble adding other frameworks like Bootstrap or Bourbon to your project, you'll probably appreciate how easy it makes this process with Tailwind in general!

Conclusion

TailwindCSS is a great tool for beginners to learn how to style website elements. It makes it easy to use and has a lot of documentation. TailwindCSS is built for modern web development, with components that don't need any extra frameworks or libraries.

So, what do you think? Are you ready to try out Tailwind CSS? It's clearly a powerful tool and an interesting alternative to Bootstrap. It has many benefits over its competitors, such as more flexibility and better performance. This makes it a great choice for beginners who want to learn how websites work behind the scenes and how theyre built up from smaller components!