When we create a web page with lots of content and design, our code becomes long and it gets hard to find the source code of individual sections. So, it will be helpful if you split the HTML and CSS code into different files.
Also sometimes if our web page doesn’t have much content it will become extra work to add CSS into another file and import it. In that case, we can add CSS styles at the beginning of our page or if we don’t have to apply many CSS styles to HTML tags we can also add CSS code with HTML elements.
So, How many ways can we add CSS to HTML?
Three. internal, external, and inline style. This means importing CSS stylesheet files or adding CSS code at the beginning of the HTML or with HTML elements.
Let me show you these methods with examples.
If for some reason you don't understand any part of this post you can read the completed code in my <a href="https://github.com/MejanH/three-ways-css-to-html">Github Repository</a>.
<h2>How to Include CSS in HTML With Embedded or Internal Method</h2>
Both internal and external CSS methods are similar. Because they work within the <code>&#x3C;head></code> section. The only difference is your CSS code is on the same file or an external file.
So, for internal CSS we will write our CSS code within the <code>&#x3C;style></code> element like the code below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Three Ways CSS to HTML&#x3C;/title>
 &#x3C;style>
 body {
 font-family: sans-serif;
 }
 .container {
 width: fit-content;
 margin: 200px auto;
 }
 &#x3C;/style>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;div class="container">
 &#x3C;h1>Three Methods to Add CSS into HTML&#x3C;/h1>

 &#x3C;ul>
 &#x3C;li>Internal CSS&#x3C;/li>
 &#x3C;li>Inline CSS&#x3C;/li>
 &#x3C;li>External CSS&#x3C;/li>
 &#x3C;/ul>
 &#x3C;/div>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
As you can see, we have applied some CSS styles using the internal CSS method.
In this example above, we changed the default font style of the <code>&#x3C;body></code> tag, and with the <code>width: fit-content;</code> declaration, we removed the extra whitespace. Because by default an element takes the whole width of the content area. Also with the <code>margin: 200px auto;</code> declaration, we set the top and bottom margin to <code>200px</code> and left and right margin to <code>auto</code> which made the element center horizontally.
<h2>How to Add Inline CSS to HTML</h2>
Instead of adding CSS styles to selectors from the <code>&#x3C;style></code> tag, you can add your code directly with your HTML tags.
This method has some benefits. You don’t have to call selectors(i.e., <code>h1</code>, <code>p</code>) to change the design of an element. Also, the CSS code will be added with an HTML tag so you can tell by looking at the element that these are the changes I applied for this element.
To use Inline CSS, you have to use the <code>style</code> attribute and add the code inside the quotation mark like the <code>class</code> attribute.
Now, what is an HTML attribute?
HTML attributes provide additional information about elements. For example, you want to give a unique name to your HTML elements, you use <code>class</code> or <code>id</code> attributes.
Check out the changed <code>body</code> tag with the previous example below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 ....
 &#x3C;/head>
 &#x3C;body style="font-size: large">
 &#x3C;div class="container">....&#x3C;/div>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
We used the <code>font-size</code> property to change the default font size and added value <code>large</code> which means we set the font size to large from normal.
If you want to add multiple declarations just separate them with a semicolon like normal CSS.
<h2>How to Use External CSS Stylesheet in HTML</h2>
The meaning of the headline is basically how to put your CSS code in an external file and import that file into your HTML to design your web page.
But, some questions emerge here: How can the HTML know that file contains CSS code? and Where is the CSS file located?
The answer is HTML <code>&#x3C;link></code> tag. It defines relationships between your current document and an external resource. This tag is most commonly used to import stylesheets. It has some attributes to use in different cases like <code>href</code>, <code>rel</code>, etc.
Back to the questions, How can we import the CSS file? We will use the location of the CSS file with the <code>href</code> attribute. How can we know that we are importing a CSS file? We will use the <code>rel</code> attribute to tell that we are importing stylesheets.
The <code>href</code>(Hypertext REFerence) attribute defines the location or URL of the external resource and the <code>rel</code> attribute defines the relationship between the document and an external file.
Let’s create a file called <code>styles.css</code> file in the same directory you created your HTML file. Remember to put <code>.css</code> at the end of your file name.
Now, move the CSS code from the <code>style</code> element of the <code>&#x3C;head></code> section to your <code>styles.css</code> and save it. Right now, there should not be any CSS code on your <code>head</code> section because we moved those to our external file. So, you can also delete the <code>&#x3C;style>&#x3C;/style></code> tags.
Finally, import the CSS file like the code below. Remember your file name should be correct.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Three Ways CSS to HTML&#x3C;/title>
 &#x3C;link rel="stylesheet" href="styles.css" />
 &#x3C;/head>
 &#x3C;body style="font-size: large">
 &#x3C;div class="container">
 &#x3C;h1>Three Methods to Add CSS into HTML&#x3C;/h1>

 &#x3C;ul>
 &#x3C;li>Internal CSS&#x3C;/li>
 &#x3C;li>Inline CSS&#x3C;/li>
 &#x3C;li>External CSS&#x3C;/li>
 &#x3C;/ul>
 &#x3C;/div>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Now, refresh your browser to see if your CSS styles are still working or not.
Let’s also add some new styles to test our final method.
<pre><code class="language-css">body {
 font-family: sans-serif;
 background-color: salmon;
 color: white;
}
.container {
 width: fit-content;
 margin: 200px auto;
}
</code></pre>
We changed the background color of the <code>&#x3C;body></code> tag to <code>steelblue</code> and font color to <code>white</code> with the <code>color</code> property.
<img src="/images/external-css-method.png" alt="After adding all CSS methods">
Yay, it’s working. Again if you got stuck following any part of this post visit the Github repository mentioned at the beginning.
From these three methods, the external method is the most popular one. Because it keeps your code clean and well structured.
You can also put your CSS file into a folder. These will be helpful when you will have multiple CSS files. And as for the <code>href</code> attribute on <code>&#x3C;link></code> tag, you need to specify your file location with your folder name like <code>./yourfoldername/styles.css.</code>
I think this is enough for you to learn about including or applying CSS styles to your web page. It’s time to learn about more HTML tags and CSS properties which will make your web page stunning.
Good Luck!

Three Ways to Add CSS in HTML Pages

Creating a server-side web API with Javascript or Typescript means solving two objectives with one single action. You don't have to learn other backend programming languages like C#, Python, etc. to create a web application.
Deno is a secure runtime environment for Javascript and Typescript where you can run your Javascript/Typescript code. To create REST API we are going to use a Deno middleware web framework called Oak.
<h2>What is Middleware in Deno?</h2>
Middleware makes web development easier for developers so they can focus on the specific purpose of their applications. For example, the Oak framework was created for Deno's Http server where a client can send a request to a server and get a response from the server.
Let's say you want to upload files on google drive or somewhere on the internet and you clicked the upload button after selecting files. By pressing that button you send a request to the web-server and when it says "Your files uploaded successfully" or something like that, that is the response from the web server.
You will understand much better when you will create the REST API.
<h2>Prerequisites</h2>
To follow this post, you should have basic knowledge of <a href="https://www.typescriptlang.org/">Typescript</a>.
Also, I recommend you to learn <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP Messages</a> like Http request, response, etc. That way you can understand how data is being exchanged between a server and client.
<h2>Getting Started</h2>
If you haven't installed Deno on your computer, check out the <a href="https://alhaqi.com/blog/install-deno-on-windows-mac-linux-operating-systems">Deno Installation on Windows, Mac, and Linux Operating Systems</a> article.
I am going to use the most popular text editor VS Code for this project. You have to install the Deno official plugin to work with the Deno project otherwise it will give you some errors. I recommend you to read the <a href="https://alhaqi.com/blog/deno-intellisense-on-vscode">Deno IntelliSense on VS Code</a> article to setup your Vs Code for Deno.
In any case, If you are stuck at following this post, you can check the completed code in this <a href="https://github.com/MejanH/web-api-deno">github repository</a>.
<h2>Building backend web API with Deno</h2>
Create a folder and open it on the VS Code and enable Deno extension on the project folder by creating <code>.vscode/settings.json</code>.
Now, create a <code>server.ts</code> file on the project directory and paste the code from below.
<pre><code class="language-typescript">import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((context) => {
 context.response.body = "Hello World!";
});

await app.listen({ port: 8000 });
</code></pre>
In this code above, we exported the <code>Application</code> from the Deno Oak module. If you visit the link that class imported from, you will see the export statement of the <code>Application</code> class there.
Then we created a new instance of the <code>Application</code> using the <code>new</code> operator which creates a new object with <code>Application</code> shape and runs the constructor to initialize it. Read the <a href="https://www.typescriptlang.org/docs/handbook/classes.html">Classes in Typescript</a> documentation to understand with more examples.
The <code>Application</code> has two methods called <code>.use()</code> and <code>.listen()</code>. The <code>.use()</code> method register the middlware and the <code>.listen()</code> method first start the server then start processing requests with the registered middleware.
If you look at the code, first we registered the middleware by using <code>app.use()</code> method then we used <code>app.listen()</code> method to start the server and process the requests from the middleware.
In the <code>.use()</code> method we passed an object called <code>context</code>. Now, What is <code>context</code> in the Oak middleware framework? The <code>context</code> provides information about the current state of the application. For example, We are sending an Http response message(<code>Hello World!</code>) to the client via <code>context</code>.
<h2>Why is there no <code>async</code> keyword before <code>await</code> in Deno?</h2>
You might notice that there is an <code>await</code> keyword before <code>.listen()</code> method but no function starts with the <code>async</code> keyword. So, does <code>await</code> work without <code>async</code> function in Deno? Yes, because Deno supports <a href="https://github.com/tc39/proposal-top-level-await">Top-level <code>await</code></a> feature but that does not mean you can use <code>await</code> in everywhere without <code>async</code> functions. Let me explain in more detail.
<h4>What is the Top-level <code>await</code> feature in Deno?</h4>
Top-level <code>await</code> enables the capability to use the <code>await</code> keyword outside of async functions which act like big async functions. But you can't use the <code>await</code> keyword in regular functions without the <code>async</code> keyword like the code below.
<pre><code class="language-javascript">function something(){
 // you have to add async before the function
 await wrong()
}
</code></pre>
Top-level <code>await</code> only works at the top level of modules like the <code>await</code> before <code>.listen()</code> method above. So, it will wait until the Promises of <code>app.listen()</code> are resolved.
<h2>Starting the API</h2>
As you saw there is a value we passed called <code>port</code> in the <code>listen()</code> method. So, What is <code>port</code> in the <code>.listen()</code> method? It's a unique port of your local testing server which will start by the <code>.listen()</code> method. But why inside curly braces? Because we are Destructuring. We are passing an object as a function parameter.
Let's start the server to understand more.
Save the file, open the terminal on your VS Code and run:
<pre><code class="language-bash">deno run --allow-net server.ts
</code></pre>
<code>--allow-net</code> grant the permission to access the network. In Deno, you need to explicitly permit programs to do certain actions, such as access to the network.
Now, open your browser and visit <code>http://localhost:8000/</code>. You will get the <code>Hello World!</code> message in your browser.
<h3>What is localhost in Deno?</h3>
Localhost means your local computer where your server or program is running on. Developers run their programs on the localhost to test their applications working or not.
And, Ports are used to be able to run multiple servers so you can work with other application servers without closing your existing server. You can try other numbers as port too like <code>5000</code>, <code>3000</code> etc.
So, This is how you create a REST API with Deno and run it. But how can you test it? How can you send a request to the server or get the response from the server? Let's see how to do that.
<h2>How to test your web API?</h2>
There are a lot of tools to test web API. I am going to use the most popular and simple app called Insomnia Core.
Download and install the <a href="https://insomnia.rest/">Insomnia Core</a> on your computer then open it.
To create a new request click on the plus icon from the left side then click New Request. It will Popup a window to name your Request. Name whatever you want to name, I am naming it Default for now. Click Create to create your request.
<img src="/images/insomnia-creating-requests.png" alt="Creating New Request With Insomnia">
<img src="/images/naming-request-insomnia.png" alt="Naming Requests Insomnia">
Now, Paste your localhost URL(<code>http://localhost:8000</code>) on the URL bar of insomnia. There is a dropdown menu on the left side of the URL bar. Click on the menu to see all the available Http request methods like <code>GET</code>, <code>POST</code>, etc. Based on our source code, we are retrieving data from the server so we will select the <code>GET</code> method.
Finally, click on the Send button to send the <code>GET</code> request to the server. You will see the <code>Hello World!</code> message will appear on the right side.
<img src="/images/sending-requests-insomnia.png" alt="Sending Requests Insomnia">
<h2>Passing an array from Deno server to client</h2>
Let's say we want to send a list of blog posts to the client. So, we should have an array of every blog post where the blog posts will be in JSON Objects format.
So, let's create an array and pass it on <code>context</code> in the <code>.use()</code> method like the code below. Also, write a <code>console.log()</code> message to display server information on your terminal.
<pre><code class="language-typescript">import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

const posts = [
 {
 id: 1,
 title:
 "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
 body:
 "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
 },
 {
 id: 2,
 title: "qui est esse",
 body:
 "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
 },
 {
 id: 3,
 title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
 body:
 "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
 },
 {
 id: 4,
 title: "eum et est occaecati",
 body:
 "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
 },
];

app.use((context) => {
 context.response.body = posts;
});

app.listen({ port: 8000 });

console.log("Server running on http://localhost:8000");
</code></pre>
Save the file, press <code>Ctrl+C</code> on your terminal to close the current running server. Because every time you change your code you need to restart the server to see changes. Now, run the <code>deno run --allow-net server.ts</code> command again to restart the server.
Go to insomnia and click the send button again. The posts data should appear on the right side like the screenshot below.
<img src="/images/terminal-message-of-deno-server.png" alt="colsole message of server runniing">
<img src="/images/get-resuest-for-array-insomnia.jpg" alt="array of posts in insomnia">
That's it, now you have learned how you can create, run, and test your web API with Deno.
<h2>Conclusion</h2>
In this whole post, I talked about only the <code>GET</code> request method which was basic of a REST API. You should make your next goal to create a crud API with Deno if you want to learn more.
If you don't understand any part of this post make sure to comment below. Also, If you learn something good from here don't forget to share the link to others.

Create a REST API With Deno Oak Framework

In the official Deno <a href="https://deno.land/manual/getting_started/installation">documentation</a>, there are shell commands to install Deno on Windows, Mac, and Linux. We will run that command and for Mac and Linux we will have to update the <code>bashrc</code> or <code>zshrc</code> file with a script.
In this post, I just explained in more detail what the docs said. So, It's safe to follow the instructions, and also running these commands on your computer will not modify your system. You are just installing an application and that's all.
<h2>Deno Installation on Windows OS</h2>
Click on the Start or Press Windows Key, type PowerShell, and then click Windows PowerShell. It will open PowerShell on your windows.
Now, Paste the command from below on PowerShell and hit Enter.
<pre><code class="language-powershell">iwr https://deno.land/x/install/install.ps1 -useb | iex
</code></pre>
It will take a while to download and finish the installation.
After successfully installed type <code>deno --version</code> on PowerShell and hit <code>Enter</code> to verify if Deno installed or not.
<img src="/images/deno-on-windows-powershell.png" alt="Deno on Windows 10 PowerShell">
<h2>Deno Installation on Mac or Linux OS</h2>
If you are on Linux, first you have to install <code>curl</code> for installing Deno. Because most Linux distributions work with <code>wget</code> which is another command-line utility for downloading files from the web.
<code>curl</code> is usually available by default on Macs so you don't have to install it. Still, you can check it by running <code>curl -V</code> on your terminal.
To install curl on Ubuntu/Debian OS, run the command below.
<pre><code class="language-bash">sudo apt install curl
</code></pre>
Now, run the next command on your terminal to download and install Deno.
<pre><code class="language-bash">curl -fsSL https://deno.land/x/install/install.sh | sh
</code></pre>
You will get a message like below after successfully installing Deno.
<pre><code class="language-bash">Archive: /YOUR_USERNAME/.deno/bin/deno.zip
 inflating: deno
Deno was installed successfully to /home/YOUR_USERNAME/.deno/bin/deno
Manually add the directory to your $HOME/.bash_profile (or similar)
 export DENO_INSTALL="/home/YOUR_USERNAME/.deno"
 export PATH="$DENO_INSTALL/bin:$PATH"
Run '/YOUR_USERNAME/.deno/bin/deno --help' to get started
</code></pre>
As the message says, You have to manually add the script in your <code>bashrc</code> or <code>zshrc</code> file.
<h2>How to Manually add the directory in <code>$HOME/.bash_profile</code> or <code>$HOME/.zshrc</code></h2>
There are two ways to open your <code>bashrc</code> or <code>zshrc</code> file. Try any method from below.
<h3>Method 1: Use file manager to open <code>bashrc</code> or <code>zshrc</code></h3>
Open the Home(<code>$HOME</code>) directory on your file manager. By default, File managers start with the Home directory. Also, make sure you have turned on the <code>Show hidden files</code> option on your computer.
You will able to see the <code>bashrc</code> or <code>zshrc</code> file on your file manager. Open the file with your favorite text editor.
<h3>Method 2: Use the terminal to open <code>bashrc</code> or <code>zshrc</code></h3>
If you are in Ubuntu, You will have Gedit text editor installed, or even if you don't have it installed you can use Nano editor.
For macOS try the nano command also.
<pre><code class="language-bash"># for gedit text editor
gedit ~/.bashrc
# or for GNU nano editor
nano ~/.bashrc
</code></pre>
After successfully opening the <code>bashrc</code> or <code>zshrc</code> file on your text editor, copy the script from the Deno installation message and paste it at the end of the line.
If you lost the message try the code below. Just make sure to replace <code>YOUR_USERNAME</code> with your pc username(i.e., john).
<pre><code class="language-bash"># deno
export DENO_INSTALL="/home/YOUR_USERNAME/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"
</code></pre>
Next, save the file and close the editor and terminal. I believe that's all you have to do to install Deno.
Now, Open up your terminal again and run the command below to verify that Deno has been installed successfully.
<pre><code class="language-bash">deno --version
</code></pre>
You should get the output of the Deno and Typescript version.
<h2>Conclusion</h2>
Well, Good Luck with Deno Web Development. I am a fan of Typescript. That is why I am happy that they released Deno alongside Node JS.
If you use VS Code text editor, There is an official <a href="https://alhaqi.com/blog/deno-intellisense-on-vscode">plugin</a> you should install to ignore <code>.ts</code> import error and enable <a href="https://alhaqi.com/blog/deno-intellisense-on-vscode">Deno IntelliSense in VS Code</a>.

Install Deno on Windows, Linux, and Mac Operating Systems

You have to install the official Deno VSCode <a href="https://github.com/denoland/vscode_deno">plugin</a> to get the autocomplete feature for Deno. Then you have to enable the plugin for your project. This plugin also removes <code>async/await</code> and <code>.ts</code> extension errors for Deno projects.
Let me explain in more detail step by step.
<h2>Deno snippets for VS Code</h2>
First, install the official Deno beta <a href="https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno">extension</a>.
Then open your project folder and create a folder called <code>.vscode</code> in your project directory if it doesn't exist. Also create <code>settings.json</code> file in <code>.vscode</code> folder.
Next, open the <code>settings.json</code> file and add the JSON text from below.
<pre><code class="language-json">{
 "deno.enable": true
}
</code></pre>
Check the screenshot below to verify that if you did everything correctly.
<img src="/images/deno-autocompletion-vscode.jpg" alt="deno extension">
You might be wondering why to use <code>settings.json</code> in the project folder. Well, enabling Deno in your global config will enable Deno for your other Typescript projects which is you don't want to. Also, code completion for Deno doesn't work with the global configuration.
Alright, Now create <code>index.ts</code> file to check if the plugin is working fine like the official plugin gif below, If not then try reloading the VSCode window.
<img src="/images/deno-intellisense.gif" alt="deno intellisense gif">
<h2>Conclusion</h2>
When I first installed that extension, IntelliSense was not working for me. Then I realized I missed a step from the documentation. I just explained in more detail what the docs said and that's all.
Well, Good Luck With Deno!

Deno IntelliSense on Visual Studio Code

Design a Web Page Using HTML & CSS

Using the Tailwind CSS framework with Next.js means getting rid of CSS modules, Styled Components, and writing Vanilla CSS code by calling HTML element classes in CSS, etc.
Also in Next.js production mode, you only get the CSS code your page needs and no more unused CSS from hundreds of CSS styles.
This post has been updated for Next.js v10 and Tailwind CSS v2.
Just to clear up any confusion, This method also works with Typescript and If you get stuck following the instructions or looking at the source code is enough for you to implement Tailwind CSS in Next.js, visit the <a href="https://github.com/MejanH/tailwindcss-with-nextjs.git">GitHub repository</a>.
<h2>Getting Started</h2>
First, you need to create a project with <code>create-next-app</code>.
Run the <code>npm</code> or <code>yarn</code> command from below. It will ask you to type your project name. Name anything you want and hit enter.
<pre><code class="language-bash">npx create-next-app
# or
yarn create next-app
</code></pre>
Try running <code>yarn dev</code> or <code>npm run dev</code> command to check if your project was created successfully.
Now, delete the CSS import from <code>/pages/_app.js</code> and CSS files from styles folder and also replace the <code>/pages/index.js</code> file with the code below.
<pre><code class="language-JSX">// index.js
import Head from 'next/head'

export default function Home() {
 return (
 &#x3C;div>
 &#x3C;Head>
 &#x3C;title>Tailwind CSS with Next.js&#x3C;/title>
 &#x3C;link rel="icon" href="/favicon.ico" />
 &#x3C;/Head>
 &#x3C;h1>Creating a project with Tailwind CSS, NextJS &#x26; Typography&#x3C;/h1>
 &#x3C;/div>
 )
}

</code></pre>
<h2>Installation</h2>
We are going to install Tailwind CSS npm packages in <code>devDependencies</code>. Because in production mode there will be only the CSS code we will use from Tailwind, not the whole Tailwind CSS file which will make our web app load slower.
Let's add the npm packages first, run:
<pre><code class="language-bash">npm install --save-dev tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer
</code></pre>
Then run the next command on your terminal to generate <code>tailwind.config.js</code> and <code>postcss.config.js</code> file in your project folder.
<pre><code class="language-bash">npx tailwindcss init -p
</code></pre>
Now, open the <code>tailwind.config.js</code> file and add the paths of your pages and components to remove unused css in production builds.
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
 purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],

 theme: { extend: {} },
 variants: {},

 plugins: [],
};
</code></pre>
Then, go to the styles folder and create a CSS style sheet called <code>styles.css</code> and paste the code from below.
<pre><code class="language-css">/* /styles/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</code></pre>
Next, open the <code>pages/_app.js</code> file and import the <code>styles.css</code> file which will be the global CSS of your Next.js web application.
<pre><code class="language-jsx">// /pages/_app.js
import "../styles/styles.css";
</code></pre>
That's it. You have implemented the Tailwind CSS framework in your Next.js application.
Let's add a button in <code>pages/index.js</code> to check if it's working.
<pre><code class="language-jsx">import Head from "next/head";

export default function Home() {
 return (
 &#x3C;div>
 ...
 &#x3C;button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
 Button
 &#x3C;/button>
 &#x3C;/div>
 );
}
</code></pre>
<img src="/images/tailwind-with-next-js.png" alt="Tailwind with Next JS">
Yep, it's working.
I assume you already noticed that heading styles are gone. Because all headings, Lists are unstyled by default in Tailwind.
You have to manually style the headings, lists, pre, blockquote elements like the code below or you can add a responsive and customizable typography plugin in Tailwind or you can disable <a href="https://tailwindcss.com/docs/preflight/">Preflight</a> to bring the default HTML style back.
<pre><code class="language-css">/* /styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* custom styles */
h1 {
 @apply text-2xl;
}
h2 {
 @apply text-xl;
}
h3 {
 @apply text-lg;
}
a {
 @apply text-blue-600 underline;
}
</code></pre>
<h2>How to add typography in Tailwind CSS</h2>
It's easy. Just like styling a <code>&#x3C;div></code> element with a <code>className</code>.
First, let's install the Tailwind CSS plugin from the terminal.
<pre><code class="language-bash"># Using npm
npm install --save-dev @tailwindcss/typography

# Using Yarn
yarn add -D @tailwindcss/typography
</code></pre>
Next, Open the <code>tailwind.config.js</code> and add the plugin like below.
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
 theme: {
 // ...
 },
 plugins: [require("@tailwindcss/typography")],
};
</code></pre>
Then open <code>index.js</code> and add the <code>prose max-w-none</code> class in the parent div element.
Add some headings, lists, blockquote, etc. HTML tags in <code>index.js</code> to test if the typography plugin is working or not like the screenshot below.
<img src="/images/typography-with-tailwindcss-reactjs.png" alt="typography with tailwindcss and nextjs">
<code>prose</code> class added the beautiful typography style and the <code>max-w-none</code> class override the default max-width of the typography plugin.
You can also modify the default styles and make typography more responsive with this <a href="https://github.com/tailwindlabs/tailwindcss-typography">plugin</a>.
Try running <code>yarn build</code> or <code>npm run build</code> then run <code>yarn start</code> or <code>npm run start</code> to run your application.
Open the developer tools in your browser and go to Network tab and refresh the page. Click on CSS stylesheets type to filter only CSS files from the list.
You will see a very low sized CSS is generated like the screenshot below.
<img src="/images/purgcss-checking-with-tailwind-css-next-js.jpg/" alt="purgecss with tailwind">
<h2>Conclusion</h2>
Developers want to save their time with flexibility and Tailwind CSS gives you exactly that type of features.
If you use Tailwind CSS as your primary framework I suggest you install Tailwind CSS Intellisense Plugin in vs code. This was helpful for me not to look at the docs every time. You just press <code>Ctrl+space</code> and it will show you every snippet with original CSS code.

Tailwind CSS With Next.js and Typography

Learn HTML(Hypertext Markup Language) programming language by creating a web page or writing a simple paragraph or an essay or an article, etc. All we need to use is HTML elements and a text editor.
This post is for absolute beginners. Even if you don't know how to write code, it won't be a problem. All you need is patience.
Remember, the computer is not a human or a magician. You have to tell it what to do, where to start, where to end, what is the text for that you typed right now, I mean everything.
<h2>How to write HTML code</h2>
To write HTML code for the first time I recommend you use your default text editors like Notepad(Windows) or TextEdit(Mac) or Text Editor(Ubuntu).
Now open up your text editor and paste the code from below. Don't get bored just by watching the code, I will try my best to explain what those are.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>This is the Headline of the paragraph&#x3C;/h1>

 &#x3C;p>Here goes the whole description of the paragraph&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Next, You have to save the file to your computer.
For Notepad got to File > Save as or for Text Editor just click on Save, It will popup an explorer window to select where to save your file.
Select any folder where you want to save, name that file index.html with "UTF-8" encoding selected option and click on Save.
Now open the file in your internet browser by double-clicking on it or drag and drop the file on your browser. You will see something like below:
<img src="/images/open-html-file-in-browser.png" alt="HTML File Preview In Browser">
We learned how to create an HTML file and preview it on the browser. Now it's time to explain what the code was. Let's start one by one.
<h2>What is doctype in HTML?</h2>
We used <code>&#x3C;!DOCTYPE html></code> at the very beginning of the code. It's not related to the paragraph you wrote. It just tells the browser that this is an HTML file and the browser preview the file as HTML.
Also DOCTYPE is not case sensitive. You can use <code>&#x3C;!Doctype></code> or <code>&#x3C;!doctype></code> etc.
<h2><code>&#x3C;html></code> tag in HTML</h2>
The <code>&#x3C;html></code> tag contains all the HTML tags we write in HTML.
If you look at the code you will see every tag like <code>&#x3C;body></code>, <code>&#x3C;p></code> are in the middle of the <code>&#x3C;html>...&#x3C;/html></code> tag. This is where we will write our all HTML code.
<h2>Why every HTML tag has a duplicate tag with a slash('/') in the end?</h2>
When you write an article, you know this is the end of my article headline, after that, You will write the description of that paragraph.
But the computer doesn't know that this should be the end. You have to tell it to stop recognizing as heading after the word of your article headline with the end tag.
The end tag starts with a slash("/") to represent the end of the tag. For example <code>&#x3C;html></code> has an end tag like <code>&#x3C;/html></code>.
<h2>Body tag in HTML</h2>
<code>&#x3C;body></code> tag contains all elements of the document's body like your body contains your eyes, hair, hands, etc.
You might be wondering then what is the use of the <code>&#x3C;html></code> tag if the body contains all the elements. <code>&#x3C;html></code> contains the head tag(i.e., CSS stylesheets, Metadata, etc.) like the brain in your head.
<h2>What is the meaning of nested elements in HTML?</h2>
By nested we mean is to put a piece of information, text, etc. inside another.
If you look at the code you will see the <code>&#x3C;body></code> tag is stored inside the <code>&#x3C;html></code> tag.
So you can call the <code>&#x3C;body></code> element is a nested element. You can also call the <code>&#x3C;html></code> element as a container.
<h2>What is h1, h2, h3, h4, h5, h6 in HTML?</h2>
Those are called HTML Headings like titles or headlines or sub-headlines of a paragraph or article.
<code>h1</code> is the bigger and the important one, <code>h2</code> is less big and important than <code>h1</code> which we use after <code>h1</code>. <code>h6</code> is the last and the smallest one. Most of the time, They play the role of subtitles under the <code>&#x3C;h1></code> tag.
Let's change the code with different headings like the code below and save.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>This is Heading One&#x3C;/h1>
 &#x3C;h2>This is Heading Two&#x3C;/h2>
 &#x3C;h3>This is Heading Three&#x3C;/h3>
 &#x3C;h4>This is Heading Four&#x3C;/h4>
 &#x3C;h5>This is Heading Five&#x3C;/h5>
 &#x3C;h6>This is Heading Six&#x3C;/h6>

 &#x3C;p>Here goes the whole description of the paragraph&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
Click on the refresh button on your browser, see if it's like the screenshot below.
<img src="/images/Html-Headings-example.png" alt="HTML Heading Example">
<h2>Paragraph(<code>&#x3C;p></code>) tag in HTML</h2>
<code>&#x3C;p></code> tag defines a paragraph like the description of a paragraph after the headline. It displays normal plain text in the browser as you saw in the screenshots.
Now, what if you want to add another paragraph after a paragraph to make a new line. Well, all you have to do is add another <code>&#x3C;p></code> tag. It will add a new line.
Update your code like below and save the file. Always remember one thing that whenever you change or update your code you have to hit Save and click the refresh button on your browser to see changes. Because the browser doesn't know that you have edited your file.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;body>
 &#x3C;h1>Title of the Paragraph&#x3C;/h1>

 &#x3C;p>
 Magnis eleifend aenean condimentum est sodales purus sagittis duis
 parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
 convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
 odio fringilla lacinia urna phasellus ornare, ultricies condimentum
 praesent luctus pretium convallis placerat tempor. Id vivamus vitae
 lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
 integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
 cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
 convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
 habitant gravida, metus etiam eu blandit potenti primis vehicula, molestie
 nascetur duis bibendum commodo. Pretium ut turpis id bibendum magnis ad
 iaculis leo, tempus facilisi fringilla varius velit inceptos vel est,
 himenaeos urna a lacinia conubia quisque nulla. Ante parturient commodo
 nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum quis ad
 pellentesque porttitor scelerisque, sociosqu ultrices nam at hac molestie
 dapibus.
 &#x3C;/p>

 &#x3C;p>
 Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
 consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
 quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
 lectus sodales venenatis nunc molestie iaculis mus dignissim aenean mauris
 magnis mi feugiat. Posuere odio per aenean torquent litora feugiat potenti
 duis mollis eu, metus condimentum ut taciti vestibulum non mauris
 malesuada a facilisi, tellus tempus vivamus mattis nostra nullam turpis
 euismod pretium.
 &#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
I added some random text as an example. Try to change the text or add a new <code>&#x3C;p></code> tag to practice HTML.
<img src="/images/Final-Paragraph.png" alt="Final Paragraph">
<h2>How to change the text of the browser tab name or title?</h2>
Right now, in the browser tab name, your file name is displaying. But what if you want to display your article headline or add a document title. Let's do that.
We will have to use <code>&#x3C;head></code> tag like we were using <code>&#x3C;body></code> tag. Unlike <code>&#x3C;body></code> tag the <code>&#x3C;head></code> tag contains document's <code>&#x3C;title></code>, <code>&#x3C;meta></code> tags etc.
<code>&#x3C;title></code> tag represents the title of the document. So, We are going to use the <code>&#x3C;title></code> tag.
Add the <code>&#x3C;title></code> tag in your code like the code below.
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html>
 &#x3C;head>
 &#x3C;title>Here goes the title of the document&#x3C;/title>
 &#x3C;/head>
 &#x3C;body>
 &#x3C;h1>Title of the Paragraph&#x3C;/h1>

 &#x3C;p>...&#x3C;/p>

 &#x3C;p>...&#x3C;/p>
 &#x3C;/body>
&#x3C;/html>
</code></pre>
<img src="/images/document-title-html.png" alt="document title html">
<h2>Conclusion</h2>
Try changing or adding new text, HTML tags to practice and learn more.
What I talked about HTML in this whole post was very basic of HTML. You will have to gradually learn other HTML elements one by one and how to group them and where should you use it or not things like that.
The complete HTML file can be found <a href="https://github.com/MejanH/web-design-html-css-tutorial/blob/web-page-with-html/index.html">here</a>.
Good Luck!
Related Article: <a href="https://alhaqi.com/blog/design-web-page-using-html-and-css">Design your HTML Web Page like other websites you see on the inernet</a>