DEV Community: Sean Kerwin

Next.js and Contentlayer static blog guide

Sean Kerwin — Fri, 02 Sep 2022 13:52:48 +0000

In this post, I'm going to build a blog demo app using Next.js and the blog will be powered by Contentlayer.

We'll be making a statically generated, fast and simple blog with no need for a backend.

Contentlayer will power the blog functionality using markdown files that we can commit to our repo.

Let's get started.

First, lets create a new Next.js application, you can follow the official guide here. I will be using yarn for this, but you can use npm or pnpm also.

yarn create next-app

You will be presented with some options if you use the above command, like the application name.

Once that has ran, you should navigate into that folder you just created.

Installing Contentlayer

Head over to the official docs if you want to read more about Contentlayer.

Add Contentlayer

yarn add contentlayer next-contentlayer

Once that has done, open your code in an IDE and open the next.config.js file, it should look like this.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

Change it to add the withContentlayer import

const { withContentlayer } = require('next-contentlayer')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = withContentlayer(nextConfig)

With that out the way, we need to create a new file at the root of our project called jsconfig.json or tsconfig.json if using TypeScript.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
            "contentlayer/generated": ["./.contentlayer/generated"]
        }
    },
    "include": ["next-env.d.ts", "**/*.jsx", "**/*.js", ".contentlayer/generated"]
}

Next we're going to want to create a contentlayer config file in the root of our project called contentlayer.config.js

This is what I have in mine

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

const computedFields = {
    slug: {
        type: 'string',
        resolve: (doc) => doc._raw.sourceFileName.replace(/\.md$/, ''),
    },
}

export const Post = defineDocumentType(() => ({
    name: 'Post',
    filePathPattern: `posts/*.md`,
    fields: {
        title: { type: 'string', required: true },
        publishedAt: { type: 'string', required: true },
        tags: { type: 'string' },
        image: { type: 'string' },
    },
    wordCount: {
      type: 'number',
      resolve: (doc) => doc.body.raw.split(/\s+/gu).length,
    },
    computedFields,
}))

export default makeSource({
    contentDirPath: 'data',
    documentTypes: [Post],
})

What this is doing is specifying a single document type called Post and they're all going to live inside a folder called data/posts/*.md.

You can read more about how this works here.

We're going to create two new folders, in the root of our project, create a folder called data, then inside that, create another called posts. The reason we're nesting it like this, is once you get your head around Contentlayer, you can extend the config above to define different document types, for instance, you might want to have Posts, Projects and Guides all stored inside your code.

Inside the data/posts folder, create some markdown files that have the following format:

---
title: "Lorem Ipsum"
publishedAt: 2022-06-24
tags: ['Nextjs', 'React'] // optional
image: '/static/post-1-hero.webp' // optional
---

Mollit nisi cillum exercitation minim officia velit laborum non Lorem
adipisicing dolore. Labore commodo consectetur commodo velit adipisicing irure
dolore dolor reprehenderit aliquip. Reprehenderit cillum mollit eiusmod
excepteur elit ipsum aute pariatur in. Cupidatat ex culpa velit culpa ad non
labore exercitation irure laborum.

The title and publishedAt are required, but the tags and image are not, they're optional, (we specified this in the config above) so try and create some posts with and without the optional fields.

The folder structure should be the following:

docs/
├─ posts/
│  ├─ post-1.md
│  ├─ post-2.md
│  ├─ post-3.md

You are free to call these markdown files whatever you want, keep them lower-case and hyphenated as this will be the slug/url for that post.

Before we go any further, lets test that contentlayer is all hooked up correctly.

yarn dev

If all works, you should get an output a bit like the following:

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
Generated 3 documents in .contentlayer
event - compiled client and server successfully in 1225 ms (178 modules)
wait  - compiling...
event - compiled client and server successfully in 49 ms (178 modules)

Notice the Generated 3 documents in .contentlayer bit, that tells us that we've hooked contentlayer up and its generated 3 files based on our markdown files.

If we look in our project, a .contentlayer folder has been created, don't edit anything inside of here as it gets regenerated each time things are changed. But if we go take a look, we should have a folder inside called generated and a Post folder inside that.

.
└── .contentlayer/
    ├── .cache
    └── generated/
        └── Post/
            ├── _index.json
            ├── _index.mjs
            ├── posts__post-1.md.json
            ├── posts__post-2.md.json
            └── posts__post-3.md.json

Take a look at one of the files, posts__post-1.md.json and it will look something like this:

{
  "title": "My first blog post",
  "publishedAt": "2022-06-24T00:00:00.000Z",
  "tags": [
    "Nextjs",
    "React"
  ],
  "image": "/static/post-1-hero.webp",
  "body": {
    "raw": "\nMollit nisi cillum exercitation minim officia velit laborum non Lorem\nadipisicing dolore. Labore commodo consectetur commodo velit adipisicing irure\ndolore dolor reprehenderit aliquip. Reprehenderit cillum mollit eiusmod\nexcepteur elit ipsum aute pariatur in. Cupidatat ex culpa velit culpa ad non\nlabore exercitation irure laborum.\n",
    "html": "<p>Mollit nisi cillum exercitation minim officia velit laborum non Lorem\nadipisicing dolore. Labore commodo consectetur commodo velit adipisicing irure\ndolore dolor reprehenderit aliquip. Reprehenderit cillum mollit eiusmod\nexcepteur elit ipsum aute pariatur in. Cupidatat ex culpa velit culpa ad non\nlabore exercitation irure laborum.</p>"
  },
  "_id": "posts/post-1.md",
  "_raw": {
    "sourceFilePath": "posts/post-1.md",
    "sourceFileName": "post-1.md",
    "sourceFileDir": "posts",
    "contentType": "markdown",
    "flattenedPath": "posts/post-1"
  },
  "type": "Post",
  "slug": "post-1"
}

In this file, we can see what contentlayer has generated, we've got body.html from our Markdown content, our slug, tags, date and title all there. Now lets use that inside react!

Rendering the posts

We're going to keep this simple by just using the index.js page to fetch our content, but we could if we wanted to, break this out into a separate page.

Open up the pages/index.js file and delete everything inside of it, we're going to start fresh.

I'm a big fan of arrow functions but if you want to use a traditional function, that's fine.

Place this inside the inedx.js file to get started.

const Index = () => {
  return (
    <div>
      Hello world.
    </div>
  )
}

export default Index

If you run the app with yarn dev now, and open it in a browser, http://localhost:3000, you should see a blank page with hello world in the corner. If so, great! Let's move on.

Now update your index.js file to have the following:

import { allPosts } from "contentlayer/generated"

export async function getStaticProps() {
  const posts = allPosts.sort((a, b) => Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt)))
  return { props: { posts } }
}


const Index = ({ posts }) => {
  console.log(posts)
  return (
    <div>
      Hello world!
    </div>
  )
}

export default Index

What we're doing here is adding the allPosts import that contentlayer generated, remember the .contentlayer folder, take a look in there at the _index.mjs file, that's where the allPosts function comes from.

We're going to use Next.js getStaticProps method (which is asynchronous) - getStaticProps is a method to tell Next.js to pre-render this page at build time, and use the props provided by getStaticProps. You can read more about this here.

We're then passing posts to the Index method, and if you console.log(posts) inside that, you'll be able to see them on the running app console.

I also created a folder at the root of my project called static with some images inside post-1-hero.webp which is what is in the markdown file for the image tag.

This is my final index.js file

import { allPosts } from "contentlayer/generated"
import Image from "next/image"

export async function getStaticProps() {
  const posts = allPosts.sort((a, b) => Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt)))
  return { props: { posts } }
}


const Index = ({ posts }) => {
  return (
    <div>

      <div className="posts">
        <h1>Posts</h1>

        {posts.map((post, i) => (
          <div key={i} className="post">
            <div>
              <h2>{post.title}</h2>

              <span>{post.publishedAt}</span>

              {/* Loop through any tags if we have any */}
              <ul>
              {post.tags && post.tags.map((tag, i) => (
                <li key={i}>{tag}</li>
              ))}
              </ul>
            </div>


            { post.image && (
              <div style={{ width: '200px', position: 'relative', height: '100px' }}>
                <Image src={post.image} alt={post.title} layout="fill" objectFit="cover" />
              </div>  
            )}

            {/* Post body */}
            <p>{post.body.raw}</p>
          </div>
        ))}

      </div>

    </div>
  )
}

export default Index

If you've followed this guide, you should be able to start your project

yarn dev

and see some posts on the page.

This will all be statically generated at build time which is great for speed, no need for a back-end to store your blog posts any more, just add a new post markdown file, commit it, and run a build/deploy.

Whilst there are so many things that can be done with Contentlayer, you can look at adding pagination, fetching next and previous posts and having multiple document types, all within the same code-base.

I really like contentlayer and the fact that it means I can write blog posts/article and just store them in my Git repo, posts can then be version controlled and I don't have the overhead of running a server to store the posts.

Feel free to checkout this code in my repo here.

I also use Contentlayer on my personal website, you can see the code for that here or see it in action by going to seankerwin.dev

Pop!_OS - The first week!

Sean Kerwin — Wed, 04 Aug 2021 21:31:01 +0000

Hey everyone.

So, I'm an avid Apple Mac user, and I've used macOS as my primary dev environment for over 10 years.

This has been mostly down to that my employer provided me with a top end Macbook Pro, so I have done everything within the apple ecosystem.

My current employer, the boss was pretty cool, I could set my mac's up how I wanted, have personal emails/icloud on it, use it for personal stuff and side-work (out of work hours ofcourse), So I've had no real reason to switch.

I have just taken a new job, and decided that I want my own machine, keep work and personal stuff separated.

Dell were doing an amazing deal on their outlet website for the XPS range of laptops, and I managed to pickup a brand-new XPS 13 9305 with 16GB Ram, and i7 Quad Core, with 512GB M2 SSD, for £800.

The only problem is that it came with Windows 10 Home edition. I tried to use Windows with WSL2, but felt like it was a fight to get even the basics to work. Windows lasted less than a day on the laptop before I decided to install Linux.

I've used Mint/Ubuntu before, and I know of System76 (who make awesome Linux machines by the way!) System76 also have developed Pop!_OS, a Ubuntu/Debian based OS that is, well, fucking amazing!

It's aimed at developers and is built from the ground up with that in mind. The keyboard shortcuts for multi-tasking is outstanding. I love the tile-view that comes and the global launcher/search makes me feel right at home, just like macOS and its Spotlight.

Now, for installing it on the XPS, it was a simple case of heading over to the Pop!_OS website and grabbing the correct ISO that you need.

I grabbed the 21.04 Non Nvidia version (as my laptop just has the Intel Iris XE graphics). Create a bootable USB and installed it on the XPS.

Aside from turning safe-boot off in the BIOS of the XPS, I did nothing else. Followed the on-screen instructions when installing the OS, I wiped my SSD and only have PopOS! as my main operating system.

Once it was installed, I opened the Pop!_Shop to let it check for updates and install them.

So far, I've been running PopOS! for over a week, and haven't had a single issue.

I have the XPS plugged via USB-C to DisplayPort for a Iiyama 34" Ultrawide running at 144hz, and a Seagate Barracuda Gaming Dock via Thunderbolt (Which has a 4TB Spinning drive and a 512GB M2-SSD inside it) and everything is working perfectly.

I have things like Docker, PHP, Node, Jetbrains (WebStorm, PhpStorm and DataGrip), Visual Studio Code, Mailspring (For emails) and it even plays nicely with my Corsair Virtuso Headset.

I could seriously see Pop!_OS replacing my Mac as a daily driver.

I've never had such a great experience with a Linux distro before.

You can checkout Pop!_OS here.
https://pop.system76.com

Day.js with RelativeTime in Nuxt.js

Sean Kerwin — Tue, 23 Feb 2021 23:21:42 +0000

This is a relatively short guide, and it's just to show how easy it is to implement day.js inside a Nuxt app.

I've always just used Moment.js for date formatting, but since Moment.js has now been abandoned and they're encouraging people to use alternatives, I needed to find a way to convert timestamps that are provided by the API's I consume. They usually return timestamps in the following format:

2020-10-08T07:51:58Z

Which to be honest, isn't really useful to anyone. That's where day.js comes in, it can convert the timestamp above into something like

Oct 8th 2020

It's pretty simple to do.

First we need to pull in the @nuxtjs/dayjs package with the following command.

yarn add @nuxtjs/dayjs
or
npm install @nuxtjs/dayjs

Once that is installed, open up your nuxt.config.js and add
'@nuxtjs/dayjs' to the modules section, and then outside of that, add the following dayjs object.

modules: [
    '@nuxtjs/dayjs',
    ...
],
dayjs: {
    locales: ['en'],
    defaultLocale: 'en',
    plugins: ['relativeTime', 'advancedFormat'],
},

Set any locales you want, for me, being in the United Kingdom, I set my locale to en and then add any additional dayjs plugins you need. I'm using the RelativeTime and AdvancedFormat plugins.

Once everything is installed, you from within any component you can do the following

{{ $dayjs('2020-10-08T07:51:58Z').format('MMM Do YYYY') }}

Which will output this

Oct 8th 2020

You can also use the RelativeTime plugin to turn it into this:

{{ $dayjs('2020-10-08T07:51:58Z').fromNow() }}

Which will return

a year ago

You can obviously, not use hard-coded dates and use props/variables such as

{{ $dayjs(post.published_at).fromNow() }}

Day.js is a simple and ultra-lightweight replacement for Moment.js and is super easy to use.

Nuxt.js + Tailwind 2.0

Sean Kerwin — Sat, 19 Dec 2020 23:31:57 +0000

In the post, i'm going to explain how to use the new Tailwind 2.0 with Nuxt.js.

By default, when you create a new Nuxt project, it comes with tailwind 1.X. To utilize the new Tailwind 2.0 and it's new classes you'll need to make some changes.

As of writing this post. There is a PR out for Nuxt and Tailwind 2.0, there's currently an issue because Nuxt 2.14 still uses PostCSS 7. Tailwind 2.0 requires PostCSS 8. You can checkout the PR here.

The good people over at Tailwind have made a compatibility build, allowing us to use PostCSS 7 with Tailwind 2. Nuxt 2.15 should be using PostCSS 8 but again, as of writing this, Nuxt 2.14 is using PostCSS 7.

What I did to get Tailwind 2.0 working on a fresh project is the following:

Run create-nuxt-app tailwind-v2 to create a project.

I answered the following:

> Project name: tailwind-v2
> Programming language: JavaScript
> Package manager: Yarn
> UI framework: Tailwind CSS
> Testing framework: None
> Rendering mode: Universal (SSR / SSG)
> Deployment target: Server (Node.js hosting)

This will create a new project, but using Tailwind 1.X, I then went on to do the following:

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

This will add the compatibility build to your project.

I then ran npx tailwind init to generate a tailwind.config.js and added the new tailwind/forms package required in tailwind 2.0 for the form styling to test it out.

My tailwind.config.js just looks like this for the demo project.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

And that's basically it.

Run yarn dev in your terminal and then head-over to https://tailwindui.com to test out the new pre-built Tailwind 2.0 components.

Angular + Firebase Hosting + Gitlab

Sean Kerwin — Sat, 17 Oct 2020 10:35:30 +0000

So in the short guide, I'm going to show you how I deploy an angular site to Google's firebase hosting using Gitlabs CI/CD Pipelines to do all the build and deploy for me.

I'm also going to be doing a staging / production builds, this way I can see things in staging and test/play and when i'm happy, push my changes to the repo's main/master branch and Gitlab will deploy it all to production.

Ok, so first thing, we need the Firebase CLI installed, using the following command in your terminal:

npm install -g firebase-tools

Once that is all done, head over to the Firebase Console and create 2 new projects:

For this demo, I created 2

fir-hosting-demo-staging
and
fir-hosting-demo-prod

You need to have 2 seperate projects if you want to deploy to staging and then production, if you don't, just create the one project.

Once they're created, head back over to your Angular application, we've got a bit of preparation to do.

Navigate to your angular application using a terminal and run the following command:

firebase init

Highlight the hosting option and then the Use an existing project option.

Select your Staging project from the list that you get by using the arrow keys.

You'll then be asked the question

What do you want to use as your public directory?

This is the path that is set in the angular.json for outputPath, it's the path that everything goes to when you run ng build.

For me, it is dist/firebase-hosting-demo as that is the name of my Angular application. So set it to that.

You'll then be asked about redirects and as its an angular application, you'll want to select yes to redirect everything to index.html.

Once you have ran this command, open up the newly created file called .firebaserc and it should look something like this:

{
  "projects": {
    "default": "fir-hosting-demo-staging"
  }
}

I like to rename my project alias, so go ahead and change default to staging

{
  "projects": {
    "staging": "fir-hosting-demo-staging"
  }
}

We're now going to add our production hosting, run the following command in the terminal.

firebase use --add

You'll then be given a list of your current firebase projects, select the production one you created.

You then have to give it an alias, I like to call mine production.

If you head over to the .firebaserc file, it should now look like this:

{
  "projects": {
    "staging": "fir-hosting-demo-staging",
    "production": "fir-hosting-demo-prod"
  }
}

You can now in the terminal of that project, just run

firebase use staging and it will switch to use the staging project, same for firebase use production.

Now, if everything has been setup right, you can go ahead and do a test build/deploy.

In your terminal, make sure you're using staging by running
firebase use staging

Build your Angular application using the command
ng build

Once that has built, you should have a dist folder with your application inside, for me it's dist/firebase-hosting-demo.

Go ahead and run the command firebase deploy --only hosting and watch as Firebase will now take all the built files from the output folder and upload them to firebase staging branch.

Once that has completed, the firebase cli will return a Hosting URL where you can see you staging application.

You can do the same for the production branch buy running the command to switch to production firebase use production and then the same firebase deploy --only hosting and the same files will be pushed to the production project in firebase.

This is good for testing, but it will become a bit tedious to remember which branch you're on, which project you're using and remembering that you need to build/push your code.

This is where we're going to leverage Gitlab and let it do all of the work for you.

Other CI/CD tools can do the same, I just mainly use Gitlab.

So now this is all setup, let's move onto the next step!

Gitlab

If you have your code all stored in Gitlab, the way I like to work is have 3 branches, master, staging, and develop.

Both master and staging are protected branches and cannot be pushed to locally, only via a merge request using Gitlab.

So, for me, I'm going to switch to the develop branch of my code.

git checkout -b develop

We're going to need a CI Token, this is a firebase token that Gitlab can use to act on our behalf. To get one of these, in your terminal, run the command

firebase login:ci

A popup will appear in your browser to login and ask for permissions, once you have done that, back in your terminal, you'll be given a CI Token that looks a bit like this.

1//03s000000000000000000000F-L9I00000000000000W-_000000Tg

I have purposely changed mine for this demo, yours won't have lots of zeros inside it.

Head over to gitlab as we now need to store this token in the project.

In your repo in gitlab, click the Settings > CI/CD and expand the section for Variables.

Click the Add Variable button and a window like this will appear.

Call the variable FIREBASE_TOKEN, and paste in the value you got from the ci:login before. I don't have the variable protected or masked, I have found that sometimes Gitlab has issues when I check these options.

Save the variable and we're done with this part of the setup.

Back into our code, create a new file at the ROOT level of your project called .gitlab-ci.yml. This is a file that gives Gitlab the instructions needed to build your project.

Paste in the following into that file:

stages:
    - build
    - deploy

image: node:12.13.0-alpine

cache:
    paths:
        - node_modules/

build-staging:
    stage: build
    rules:
        - if: $CI_COMMIT_BRANCH == "staging"
    script:
        # Install dependencies
        - npm install
        # Build App
        - npm run build
    artifacts:
        paths:
            # Build folder
            - dist/firebase-hosting-demo
        expire_in: 1 hour

deploy-staging:
    stage: deploy
    script:
        - npm install -g firebase-tools
        - firebase use --token $FIREBASE_TOKEN staging
        - firebase deploy --only hosting -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
    rules:
        - if: $CI_COMMIT_BRANCH == "staging"

build-production:
    stage: build
    rules:
        - if: $CI_COMMIT_BRANCH == "master"
    script:
        # Install dependencies
        - npm install
        # Build App
        - npm run build
    artifacts:
        paths:
            # Build folder
            - dist/firebase-hosting-demo
        expire_in: 1 hour

deploy-production:
    stage: deploy
    script:
        - npm install -g firebase-tools
        - firebase use --token $FIREBASE_TOKEN production
        - firebase deploy --only hosting -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
    rules:
        - if: $CI_COMMIT_BRANCH == "master"

I'm not going to go over in depth what this file does, but essentially, it will build and deploy your Angular application for you, but use different Firebase projects depending on what Git branch you use.

So the idea is, make some code changes on your develop branch. Once you're happy, commit and push your code to the remote develop branch.

Do a merge request when you're ready from develop to staging and watch as Gitlab will start a pipeline to build your Angular app and deploy it to Firebase.

When you're happy to go live, do another merge request from staging to master in Gitlab and it will build again and deploy to production.

The first time this runs it might take some time, this is because in my gitlab-ci.yml file, I have specified to cache the node_modules, but once this has done, pipelines that run after this should be faster!

Hope you enjoyed my guide, and any questions, don't hesitate to contact me!.

Angular 8/9/10 + Tailwind CSS Guide

Sean Kerwin — Tue, 12 Nov 2019 08:56:14 +0000

So, I've found a lot of crappy guides on the internet about how to integrate TailwindCSS with Angular 8, a lot of them involve some nasty hacks that I think are basically, shit. I've collated some information from various sources online to show you how I go about implementing TailwindCSS with Angular 8. If you're reading this and you don't know what TailwindCSS is, two things, one, where the hell have you been the past few years and two, go to tailwindcss.com and feast in the amazingness (is that even a word) that is Tailwind.

We'll be utilising the @angular-builders/custom-webpack package which will essentially allow us to tailor the webpack build to add tailwind into the build process.

First things first, install the following:

npm i tailwindcss postcss-scss postcss-import postcss-loader @angular-builders/custom-webpack -D

Next you need to open up your Angular project, I'm going to assume you're using sass, as well, why the fuck not?

Open your styles.scss file and add the following at the top.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Next, you need to create the tailwind config file, to do so, open your terminal and smash in the following (inside the directory of your app of course).

npx tailwind init

Now we need to extend the webpack config, first, start by creating webpack.config.js at the root of your project, this is what it should look like

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    syntax: 'postcss-scss',
                    plugins: () => [
                        require('postcss-import'),
                        require('tailwindcss'),
                        require('autoprefixer'),
                    ]
                }
            }
        ]
    }
};

Once you've added that, modify the angular.json file to tell it to use the custom builder and config file.

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    }
  }
}

Now we're all up and ready to rumble, add some tailwind classes to an object and run

npm start

Extra

The whole point of Tailwind is to create custom utilities, you can do so by doing the following:

Modify your styles.scss and add 2 new custom imports.

@import 'tailwindcss/base';
@import 'tailwindcss/components'; 
@import './custom-tailwind/custom-components.css'; // added
@import 'tailwindcss/utilities';
@import './custom-tailwind/custom-utilities.css'; // added

Make sure that they're added in the exact order above.

You can now create a folder inside the src directory called custom-tailwind
Inside this, you create the 2 files the same names as above, now you can create custom reusable utilities and components, for example:

custom-components.css

.btn {
  @apply px-4;
  @apply py-2;
  @apply rounded;
  @apply bg-indigo-500;
  @apply text-white;
  transition: 200ms;
}

.btn:hover {
  @apply bg-indigo-600;
}

And now anywhere you want a button, just give it the class .btn and it will apply all the tailwind classes.

For custom-utilities.css, you can do the following:

.rotate-0 {
    transform: rotate(0deg);
}
.rotate-90 {
    transform: rotate(90deg);
}
.rotate-180 {
    transform: rotate(180deg);
}
.rotate-270 {
    transform: rotate(270deg);
}

And now anywhere, you can just call these classes. Neat huh!

Enjoy the power that is TailwindCSS + Angular 8!

Update:

I realise this is a repeated post, for some reason I had 3 dev.to accounts (god knows why) and this is the account I wanted to use, so I deleted this post along with the other account and re-created it here.

Update 2:

This also works the same way with Angular 9, I have this working using angular version "@angular/core": "~9.0.0",

Update 3: Angular 10.X

postcss-loader came with some breaking changes when it jumped from version 3 to 4.

I managed to get Angular 10 and Tailwind to play nicely by changing my webpack.config.js to the following:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
-          ident: 'postcss',
-          syntax: 'postcss-scss',
-          plugins: () => [
-            require('postcss-import'),
-            require('tailwindcss'),
-            require('autoprefixer'),
-          ],
+          postcssOptions: {
+           ident: 'postcss',
+            syntax: 'postcss-scss',
+            plugins: [
+              require('postcss-import'),
+              require('tailwindcss'),
+              require('autoprefixer'),
            ],
          },
        },
      },
    ],
  },
};

Thanks to @phileagleson for spotting this!

You can also skip the entire above process and just the the Schematic that was created to do the work for you.

garygrossgarten/ngx-tailwind

Note, you will still need to change the webpack.config.js even if you use the Schematic when using this with postcss-loader Version 4 and Angular 10

Update

Thanks to thieugiatri4492 for pointing out that if you used my manual method of installing Tailwind, and then moved over to use the schematic, you'll need to remove the webpack.config.js before using the schematic otherwise it will throw an error that it already exists!