In this article, I’ll show you how to setup Tailwind CSS with your Turborepo.

The GitHub repo for this blog is added in the references.

We have created a basic app template using the `npx create-turbo@latest`.

I have made a small change in that template, by moving pages, styles into the
`src` folder, so the folder structure would look something like:

```plain text
.
|-- apps
|   |-- docs
|   |   `-- src
|   |       |-- pages
|   |       `-- styles
|   `-- web
|       `-- src
|           |-- pages
|           `-- styles
`-- packages
    |-- config
    |-- tsconfig
    `-- ui
        `-- components
```

## 1. Installing Tailwind.

We’ll start off by installing tailwindcss, postcss and autoprefixer at the root
of your project.

```bash
yarn add -DW tailwindcss postcss autoprefixer
```

> Optionally you can also install `prettier-plugin-tailwindcss`for sorting those
> tailwind classes in the components. Check the references below to learn more.

Our root package.json would look like:

```json:package.json
{
  // ...
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.7",
    "tailwindcss": "^3.0.23",
    "turbo": "latest"
  }
  // ....
}
```

---

## 2. Creating tailwind.config.js and postcss.config.js

In our `packages/config`, let’s create `tailwind.config.js` and
`postcss.config.js`

- In `tailwind.config.js`, add the following:

```javascript:tailwind.config.js
module.exports = {
  content: [
    '../../packages/ui/components/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}
```

- In `postcss.config.js`, add the following:

```javascript:postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
```

---

## 3. Using the above configs in our apps and packages

- We have created the common configs, Now we are ready to use them in our
  `apps/web`, `apps/docs` or `app/{name}` directories.
- Again create `tailwind.config.js` and `postcss.config.js` in our `apps/{name}`
  directories and in `packages/ui`

Add the following in the files:

```javascript:{apps,packages}/{web,docs,ui}/tailwind.config.js
module.exports = require('config/tailwind.config')
```

```javascript:{apps,packages}/{web,docs,ui}/postcss.config.js
module.exports = require('config/postcss.config')
```

Lastly, in our `next.config.js` for both `web` and `docs` add this if it’s not
already present:

```javascript:next.config.js
const withTM = require('next-transpile-modules')(['ui'])

module.exports = withTM({
  reactStrictMode: true
})
```

---

That’s it! You are now ready to use Tailwind CSS with Turborepo!

### References

- [Github Repo for this blog](https://github.com/ShubhamVerma1811/turbo-tailwind)
- [Automatic Tailwind CSS Class Sorting](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)


In this article, I’ll show you how to setup Tailwind CSS with your Turborepo.

Setup Tailwind CSS with Turborepo!

NextJS provides us with SSR capabilities by rendering the page in the server.

Although, if you are Tailwind for styling, you'll notice that the styles are not applied on the server rendered pages.

For this to work, we need to enable an experimental feature in `next.config.js`

```js
const nextConfig = {
  //...
  experimental: {
    optimizeCss: true, // enabling this will enable SSR for Tailwind
  },
};
```
We also need to install Critters

```bash
yarn add -D critters
```

> Next.JS will internally use this library called [Critters](https://github.com/GoogleChromeLabs/critters)

Now, all you do is `yarn build` and then `yarn start`.

Make a Postman call and under "Preview" you could see that the Tailwind styles are now getting applied at the server!

Here are the before and after screenshots:

## Before

You can see that no styles are applied on the server rendered page.

![Screenshot of before the change](https://cdn.sanity.io/images/bqrb5wuc/prod/38d40bbbf88060bc100235b53de8e48572e000b2-1920x1080.png)

## After

After the changes are made, you can see that the styles are applied on the server rendered page.

![Screenshot of after the change](https://cdn.sanity.io/images/bqrb5wuc/prod/cae3ac5adf8bfff74cdbb00059838a48332493dd-1920x1080.png)

Gotcha:

If you are using the `@tailwindcss/typography` plugin, you'd notice these warnings in your logs.

More info [here](https://github.com/tailwindlabs/tailwindcss/discussions/4722)


Server Side Rendering of Tailwind CSS styles in NextJS

Protecting Routes from unauthenticated users is a crucial part of any app.

In this blog, I’ll show you exactly how to do that with your NextJS pages using
Higher-Order Components 1

There can be several ways of authenticating a user like using cookies or JWT
tokens.2

I’ll be using JWT token as an example, where the `accessToken` is stored in the
`localStorage`

Let’s consider a page “/dashboard”. This page should be only accessed by
authenticated users

### In our `Dashboard.jsx`

```typescript
// pages/dashboard.jsx
import withAuth from 'HOC/withAuth.js'
const Dashboard = ({ user }) => {
  return (
    <div>
      <h1>Dashboard</h1>
      <h2>{user.name}</h2>
    </div>
  )
}

export default withAuth(Dashboard)
```

Notice that we are importing `withAuth.jsx` and exporting the page by passing it
as an argument. That is all we need to do for our pages.

---

### In our `withAuth.jsx`

I’ll show you two methods of implementations:

- Method 1: We don’t verify the token
- Method 2: We verify the token

### Method 1: (We don’t verify the token)

```typescript
// HOC/withAuth.jsx
import { useRouter } from 'next/router'
const withAuth = (WrappedComponent) => {
  return (props) => {
    // checks whether we are on client / browser or server.
    if (typeof window !== 'undefined') {
      const Router = useRouter()

      const accessToken = localStorage.getItem('accessToken')

      // If there is no access token we redirect to "/" page.
      if (!accessToken) {
        Router.replace('/')
        return null
      }

      // If this is an accessToken we just render the component that was passed with all its props

      return <WrappedComponent {...props} />
    }

    // If we are on server, return null
    return null
  }
}

export default withAuth
```

---

### Method 2: We need to verify the token.

```typescript
// HOC/withAuth.jsx
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import verifyToken from 'services/verifyToken'

const withAuth = (WrappedComponent) => {
  return (props) => {
    const Router = useRouter()
    const [verified, setVerified] = useState(false)

    useEffect(async () => {
      const accessToken = localStorage.getItem('accessToken')
      // if no accessToken was found,then we redirect to "/" page.
      if (!accessToken) {
        Router.replace('/')
      } else {
        // we call the api that verifies the token.
        const data = await verifyToken(accessToken)
        // if token was verified we set the state.
        if (data.verified) {
          setVerified(data.verified)
        } else {
          // If the token was fraud we first remove it from localStorage and then redirect to "/"
          localStorage.removeItem('accessToken')
          Router.replace('/')
        }
      }
    }, [])

    if (verified) {
      return <WrappedComponent {...props} />
    } else {
      return null
    }
  }
}

export default withAuth
```

---

Footers:

1. [React Higher-Order Components](https://reactjs.org/docs/higher-order-components.html)
2. [User authentication in NodeJS](https://debbie.hashnode.dev/a-beginners-guide-to-user-authentication-and-authorization-with-json-web-tokens-versus-sessions-in-nodejs)

---

Wasn’t that easy!

I hope this blog helped you. If you got any queries or feedback then let me know
😀


Protecting Routes from unauthenticated users is a crucial part of any app

Implement Protected Routes in NextJS!

A Raycast extension that let's you search Naitvebase documentation.

Search NativeBase Documentation

This is a rehype plugin that allows you to resize images in markdown files like Obsidian.

Rehype Image Resize

A simple extension that enables symbols and outlines for a React files!