DEV Community: Angel Martinez

Nest.js - Introduction (Part 1)

Angel Martinez — Fri, 17 Sep 2021 22:16:03 +0000

I've been learning Nest.js for the last few months and it has become my favourite Node.js framework. So, because of that, I decided to write a little introduction about Nest.js and how it works.

What is Nest.js?

First of all, if it's the first time you hear about Nest.js you may want to know what is and what you can do with it, so we'll start with that.

Nest.js is a framework to build server-side applications with Node.js that provide us with a complete architecture that allow us to create highly testable, scalable and easy to maintain projects. Also, Nest.js combines a lot of things about Object-oriented programming, Functional programming and Functional Reactive Programming.

Behind the scenes, Nest.js use Express (or Fastify) to make HTTP servers, but Nest.js is highly customizable that you can use whatever you want. Nest comes with a lot of integrated tools to create our project without complication, adding things for data validation, error handling, authentication, authorization, routing, filters and so on.

Project setup

The Nest team provide us with a nice tool called @nestjs/cli as its name explains itself it's a CLI tool that can do the recurring tasks for us when we're developing a project with Nest.

Let's start with the installation of that tool, open your terminal and write the following command using npm or yarn.

npm i -g @nestjs/cli
# or 
yarn global add @nestjs/cli

After the installation finishes (it may take a while) we can run the nest command to check that all of the things works fine. So, just run the following command in your terminal.

nest -v 

# output: v8.1.1

Once you run this command, you should be able to see the current version of Nest.js, don't worry if your version is the newest than mine.

So, we're good! Now we can create a Nest.js project, the only thing that we need to do is to use the nest command with the following options.

nest new your-project-name

This will create the full structure of a Nest.js project for us. After running that command, the CLI may ask you about what package manager you prefer (npm or yarn), select the one that you love.

Once the command finishes its process, we'll have a folder with the name of our project, and inside of that folder, we'll see the following structure.

├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
├── node_modules
├── .eslintrc.js
├── .prettierrc
├── .gitignore
├── README.md
├── package.json
├── nest-cli.json
├── tsconfig.json
├── tsconfig.build.json
└── yarn.lock

First Steps

Well, at this point we already have created our project, so let's start writing some code. I want to explain all of the things from scratch, so let's delete all of the files inside of the src folder. And then, create a new file called main.ts inside of it.

main.ts

The main.ts file it's as their name explains itself the main file that executes Nest.js (or our project) to run the entire application.

const bootstrap = async () => {};
bootstrap();

In this async function, we'll initialize (or create) the instance of our application. You can rename the function to the name that you want without problems.

Well, an instance, but what instance?

Nest.js provide us with a class called NestFactory and a static method named create() that creates an instance of a Nest.js application, that will allow us to mount our project and be executed. This can be compared (or similar) to the process that we do when creating (or initialize) an application in express.

import { NestFactory } from '@nestjs/core';

const bootstrap = async () => {
  const app = await NestFactory.create(/* something here... */)
};

bootstrap();

We store the object that returns the create() static method of the NestFactory in a variable (this will allow us to set up some configuration, and use other tools). Right now we have a problem because the create() static method needs a param, that param is the Root module of our application. To fix that, let's create a file called app.module.ts inside of our src folder with the following code:

import { Module } from '@nestjs/common';

@Module({})
export class AppModule {}

Don't worry about this thing called module I'll explain it later in this series. Once we create this root module, let's include it in our main.ts file as follow:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

const bootstrap = async () => {
  const app = await NestFactory.create(AppModule);

  app.listen(5000);
};

bootstrap();

In the code above we just import our AppModule that we create before, and we just pass it into the create() method params. And also we have called the method listen() passing to it the value 5000 that represents the port, this method just create an HTTP listener to set up our HTTP server.

At this point, we can run our project and see that it's working fine.

To run our project in development mode (on watch mode) we just need to run the following command in our terminal.

npm run start:dev
# or
yarn start:dev

Once you run the command you will see something like this:

And that's it, our project it's ready to write more code and start to create our API using Nest.js.

Did you like it? See you in the next part of the series. 😊

ReactJS - Tailwind CSS Starter

Angel Martinez — Sat, 21 Nov 2020 21:49:47 +0000

Do you like tailwindcss and ReactJS?

If the answer is yes, a few weeks ago I created a template for React (cra) that allows you to create a create-react-app project with Tailwind CSS already configured.

in order to avoid setting tailwindcss in every project you use.

Setting Up

To use this template, you need to open your terminal or CMD in your preferred folder or path. Then, write the following command and press enter:

npx create-react-app myproject --template tailwindcss-starter
# or
yarn create react-app myproject --template tailwindcss-starter

This command will start generating a create-react-app project with all the basic dependencies for React and in turn, it will download each file and package that I have configured so that you can use Tailwind CSS.

Project Structure

Once your project has been generated you will see the following structure of your project.

└─ projectfolder
  ├─ node_modules
  ├─ public
  ├─ src
  ├─ .gitignore
  ├─ .prettierrc
  ├─ package.json
  ├─ postcss.config.js
  ├─ README.md
  ├─ tailwind.config.js
  └─ tailwind.css

tailwind.config.js: here you can edit your tailwindcss configuration, add more colors, animations, etc.
postcss.config.js: if you need something related to postcss here you can set up.
.prettierrc: here you can find a little configuration of prettier. This project has a prettier-plugin that help you regrouping all of the classes of tailwindcss in your JSX code.
tailwind.css: entry CSS file of tailwindcss, here you can add your custom classes or create components with the @apply directive.

Available Scripts

With this template, you have available the basic scripts that create-react-app proved us, but I added three more scripts in our projects.

The first script allows us to generate the fully CSS file of tailwindcss available in src/styles.css. This file contains all of the classes that tailwindcss provides us.

  npm run build-css:develop
  # or
  yarn build-css:develop

The other script allows us to generate a purged CSS file of tailwindcss. This means that the output CSS file only will have the classes that we used in our project.

  npm run build-css:production
  # or
  yarn build-css:production

The last one allows us to "format" our classes in our HTML or JSX code, this will regroup the tailwindcss classes in a certain order that you can find in .prettierrcfile.

  npm run format
  # or
  yarn format

And this is my template, I hope you find helpful this project, any advice or request is welcome. You can find the repository here.

Original post here.

Tailwind CSS - Introduction

Angel Martinez — Mon, 28 Sep 2020 19:25:27 +0000

What is Tailwind CSS?

Tailwind CSS is a framework like Bootstrap. However, unlike Bootstrap it does not "provide" pre-defined components that give us certain functionality, that is, mainly the Tailwind CSS feature.

Definition from the official documentation:

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Basically, what this tells us is that Tailwind CSS is not a framework that imposes design or structure patterns on us, nor does it provide style (colors, sizes, etc) nor does it provide us with pre-defined components.

At this point, you probably see Tailwind CSS with little benefit, as we are possibly losing the speed you previously had when using Boostrap, what is the benefit?

The great advantage of Tailwind is the amazing ability to create custom designs on your own, supplying every little "building block" that Tailwind CSS provides.

Building blocks? Utility-first?

Now, we may have a little doubt, what exactly do utilities or building blocks mean? Surely you already know it, and to refresh your memory there are some examples of them:

text-white = color: #fff;
font-bold = font-weight: bold;

Usually, while designing in CSS we have "utility" classes that we generally re-use very frequently. In this case, these "utilities" are the foundation of Tailwind CSS since it gives us endless utilities for everything we need (fonts, grid, flex, colors, borders, shadows, animations, etc).

How Tailwind CSS looks?

Before starting to get into the action with Tailwind CSS, I leave you a small example of what an HTML code looks like using Tailwind CSS. Also, it should be noted that using Tailwind CSS we will very rarely resort to our stylesheet, only in specific situations where Tailwind still does not work.

<button 
  class="px-6 py-3 bg-blue-500 rounded text-white font-bold"
>I'm a Button!</button>

Output:

Getting Started with Tailwind CSS

Tailwind CSS can be used with any technology like HTML/JavaScript, ReactJS, Angular, VueJS. In this post, we gonna use Tailwind CSS in a basic project with HTML.

I hope you have the following basic project structure:

└─ yourprojectfolder
  ├─ assets
  │  └─ css
  │     └─ styles.css
  ├─ index.css
  └─ index.html

Setting Up Tailwind CSS in our Project

Tailwind CSS provides us two options for usage (npm, cdn). In this case, we gonna use the NPM Package because we want to learn deeper about Tailwind CSS.

Generate package.json

If you already work with NodeJS you can do this, and jump to the next step.

In your terminal run the following command:

npm init -y

This command will gonna generate a package.json in our root folder, this file allows us to install dependencies for our project.

Install Tailwind CSS

Now, we need to install Tailwind CSS in our project, so, we'll gonna run this command:

yarn add tailwindcss
# or
npm install tailwindcss

You can install globally if you want.

Generate a tailwind.config.js file

tailwind.config.js file allows us to customize Tailwind CSS. We'll talk more about it in the future.

To generate this file, you need to run the following command:

npx tailwindcss init

Then, Tailwind CSS will gonna generate the tailwind.config.js in our root folder.

You can add the --full flag to the command, to generate the full configuration of Tailwind CSS. Helpful if you want to look at how Tailwind CSS works.

Inside this file we have something like this:

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

I'll explain more about all of this that we can do here, but now, we need to continue setting up Tailwind CSS.

Add Tailwind CSS to our CSS

Now, we need to add some lines of code in our index.css file, if you don't have this file you need to create.

Open the file, and put the following code:

/* index.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

Adding scripts and generate our Tailwind CSS Build

Now, we need to create and script in our package.json file.

// package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
  },
...

With this script we can generate the build of Tailwind CSS, the only thing we need to do, is run the following command in the terminal:

yarn build-css
# or
npm run build-css

This script will gonna generate a styles.css file in our assets folder, this file contains all the classes that Tailwind needs, for the moment this file maybe is too heavy, but we gonna fix that in the future.

Adding Styles in our HTML

In your index.html you need to add the build CSS file:

<!-- index.html -->
...
<head>
  ....
  <title>Tailwind CSS Started</title>

  <!-- Styles -->
  <link rel="stylesheet" href="assets/css/styles.css">
  ...
</head>
...

At this point, we have installed Tailwind CSS, and we can start to write some HTML code with Tailwind CSS classes. You can see the documentation of Tailwind CSS for more information.

Delving into the config file of Tailwind CSS

Let's look at the Tailwind CSS configuration file again:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

I'll talk mainly about these two things in the tailwind.config.js file.

purge: This is an Array of "paths". Tailwind CSS can read these paths and start "purge" the build file, leaving only the classes we need, and with this, we can reduce the size of our file.
theme: The theme section is the most important I think, here, we can add, edit and overwrite all of the things about Tailwind CSS (colors, margin, padding, background, fonts, etc). You can add custom colors or overwrite existing colors.

Purge our CSS build

To purge our CSS build we need to specify what files use Tailwind CSS classes, so let's do that.

module.exports = {
  ...
  purge: ['index.html'],
  ...
}

In this case, we only have one file, but, if you have more files you can add.

For this to work, Tailwind CSS only purges the file when the node environment is in production.

You only need to install cross-env and then add the following script in your package.json.

// package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
    "build-css:prod": "cross-env NODE_ENV=production tailwindcss build index.css -o assets/css/styles.css"
  },
...

The output of this script is:

yarn run v1.22.5
$ cross-env NODE_ENV=production tailwindcss build index.css -o src/css/styles.css

   � Building: index.css

   ✅ Finished in 1.56 s
   � Size: 12.28KB
   � Saved to src/css/styles.css

As you can see, the file now weighs only 12.28KB

I hope this post has been to your liking. If you have any questions or something to add or correct, let me know!

You can check this repo with all ready to use: Tailwind CSS Starter

Gitflow - Introduction

Angel Martinez — Sat, 15 Aug 2020 23:17:24 +0000

What is Gitflow?

Gitflow is a Git Workflow that defines a strict model of branches, mainly oriented to releases, usually for large projects.

It is important to clarify that Gitflow doesn't add new concepts or extra commands. It only assigns specific functions to different branches.

Setting up

Gitflow it's already included by default in Git, so, we can start a new project with Gitflow, put the following command in the terminal:

git flow init -y

The -y flag, basically generate all the branches and prefix for us with the default names. But if you need a some custom prefix or different name of the main branches, you can delete the flag and answer the questions.

The output of this command is the following:

$ git flow init
Initialized empty Git repository in C:/Users/ID139/Desktop/gitflow-practice/.git/    
No branches exist yet. Base branches must be created now.
Branch name for production releases: [master]
Branch name for "next release" development: [develop] 

How to name your supporting branch prefixes?
Feature branches? [feature/] 
Bugfix branches? [bugfix/] 
Release branches? [release/] 
Hotfix branches? [hotfix/] 
Support branches? [support/] 
Version tag prefix? [] 
Hooks and filters directory? [C:/Users/ID139/Desktop/gitflow-practice/.git/hooks] 
$

Well, as we can see, Gitflow creates two branches:

master
develop

The second thing that Gitflow do, is set the prefix of the other branches like features, hotfix, etc. That's branches look like feature/my_new_feature.

Starting with Gitflow

Like I've told you before, Gitflow has specific functionality for each branch.

Before to start, It's important to say that the develop is basically the full history of our project. The master branch would only be our production branch, this means that all the code in the master branch is functional, documented, and bug-free.

- Feature Branch

Does your project need a new improvement? The feature branch is the one indicated. This branch is based in the develop branch, here we can do the commits of our new functionality.

Start a Feature

With the following command, we can create a new feature branch:

git flow feature start <feature_name>

In <feature_name> you will specify the name for the new Feature. This will basically create the new branch, and assign it as the current or working branch.

At this point, we can start committing the new features for our project.

Publish a Feature

As expected, surely someone works with you in this new Feature, therefore, it's necessary to send it to the main repository, you can do it with:

git flow feature publish <feature_name>

Finish a Feature

At this point, I suppose that your new functionality is finish. The next step is to finish our branch, basically, the feature branch will be merged with the develop branch.

git flow feature finish <feature_name>

Don't forget to do a git pull before finish the feature.

- Release Branch

The release branch, basically allows us to create a "release" of the project, that's mean will be sending our project to a production environment.

Start a Release

To start a new release we need to put the following command in the terminal:

git flow release start <release_name>

The name of your branch is the name that will use the tag of the release.

After this step, you can start to commit your project. In this branch, we're expected to use for documentation and testing.

Publish a Release

Same as above, we can publish our branch if someone needs to collaborate in the branch.

git flow release publish <release_name>

Finish a Release

In this point, all the project works fine. So, we need to finish the release branch.

git flow release finish <release_name>

Don't forget to do a git pull before finish the release.

Unlike other branches, the release branch will be unified with both develop and master. And they will be tagged.

- Hotfix

The hotfix branch helps us to correct errors in production. This is the only branch that derives from the master.

Start a Hotfix

The commands it's the same, but with the corresponding arguments.

git flow hotfix finish <hotfix_name>

Publish a Hotfix

If you need to send it to the main server or repository.

git flow hotfix publish <hotfix_name>

Finish Hotfix

Once the error is corrected, we must end the branch, it will be merged with master and develop. The master branch will be labeled with the version number.

git flow hotfix finish <hotfix_name>

Don't forget to do a git pull before finish the *hotfix *.

Other Branchs

The previous branches are the main ones, or the most common. However, as you could see from the ** log ** when we started a project with git, we have some additional branches.

Which are:

Bugfix
Support

I hope this guide has helped you to learn a little about Gitflow, a very good tool for working in teams in my opinion. Anything you want to add is welcome.

Reference: Gitflow Workflow

The Power of twin.macro

Angel Martinez — Wed, 22 Jul 2020 04:39:28 +0000

I'll explain what is twin.macro and I'll show you all of the features provided by twin.macro.

What is twin.macro?

It's a library wich basically converts your TailwindCSS classes into CSS objects and shares them with emotion or styled-components to give you the power of writing with Styled Components.

Features

First, we need to know that twin.macro works with emotion or styled-component.

Support

twin.macro it's available for Vanilla JavaScript, React.js (CRA), Gatsby, and Next.js. Vue.js it's only an experimental version.

Pluggins

For the moment, twin.macro accepts certain plugins like:

Prop to JSX Elements

You can pass the tw prop into JSX elements, a good way if you have an element without a lot of classes.

/** @jsx jsx **/
import { jsx } from '@emotion/core';
import 'twin.macro';

export default function App() {
  return (
    <h1 tw="text-2xl text-blue-500 font-bold">Hello world</h1>
  );
}

In emotion it's very important that you import the JSX to your component, without this your classes appear like [object object] and obviously we don't want that.

Nesting `tw` with `css` prop

In this case, you can pass de css prop to a JSX Element in order to create conditional styles.

In the example, we have a variable called isBold and basically in the css prop check if the isBold is true. If it's true then we will have an element with font-bold class.

/** @jsx jsx **/
import { jsx } from '@emotion/core';
import tw from 'twin.macro';

export default function App() {
  const isBold = true;
  return (
    <h1 css={[tw`text-3xl text-blue-500`, isBold && tw`font-bold`]}>Hello world</h1>
  );
}

Mixing SASS styles with the `css` import

With the css import, we can mix SASS style with our TailwindCSS classes.

/** @jsx jsx **/
import { jsx } from '@emotion/core';
import tw, { css } from 'twin.macro';

export default function App() {

  const myCustomStyles = css`
    ${tw`font-bold`}
    &:hover {
      font-weight: 500;
      ${tw`text-black`}
    }
  `;

  return (
    <h1 css={[tw`text-3xl text-blue-500`, myCustomStyles]}>Hello world</h1>
  );
}

Styled Components

With the tw import we can create a Styled Component, good if you have elements that you repeat a lot.

import React from 'react';
import tw from 'twin.macro';

const MyButton = tw.button`border-2 border-blue-500 px-4 py-2`;

export default function App() {

  return (
      <MyButton>Hello World!</MyButton>
  );
}

And maybe, you want to have a "base" style for a Styled Component, you can Clone and Edit an existing Styled Component.

import React, { Fragment } from 'react';
import tw from 'twin.macro';

const MyButton = tw.button`border-2 border-blue-500 px-4 py-2`;
const MyPrimaryButton = tw(MyButton)`text-white bg-blue-500`; // Cloned Styled Component

export default function App() {

  return (
    <Fragment>
      <MyButton>Hello World!</MyButton>
      <MyPrimaryButton>My Second Hello World!</MyPrimaryButton>
    </Fragment>
  );
}

Styled Component - Conditional Styles

Maybe you need a conditional style, with styled import we can do it.

import React from 'react';
import tw, { styled } from 'twin.macro';

const MyButton = styled.button(({isBold, isPrimary}) => [
  tw`mt-5 ml-5 border-2 border-blue-500 px-4 py-2`,
  // Ternary
  isBold ? tw`font-bold` : tw`font-semibold`,
  // Conditional Style
  isPrimary && tw`text-white bg-blue-500`
]);


export default function App() {

  return (  
    <MyButton isPrimary>Hello World!</MyButton>
  );
}

In this Styled Component, you can create conditionals styles, passing props to the function in this case we have two "isBold" and "isPrimary". We can use the ternary operator to apply certain classes or styles depending on what we need.

Variant Groups

One of twin.macro's new enhancements is the ability to group classes, which I really loved.

Maybe you're working in the Responsive web desing or in multiple classes or styles for the hover pseudo-class.

So, twin.macro allows you to group multiple classes, for example you have the following classes in your Styled Component:

<h1 tw="text-blue-500 bg-blue-500 border-2 border-blue-500 hover:text-blue-900 hover:bg-blue-900 hover:border-blue-500" >Hello World</h1>

Maybe you don't want to re-write hover: prefix to all the classes, now in twin.macro you can do the following:

<h1 tw="text-blue-500 bg-blue-500 hover:(text-blue-900 bg-blue-900)">Hello World</h1>

Do you see it? You only need a single hover:() to add multiple styles that will react to the pseudo-element.

See all variants to Prefix your Classes

Theme

If you have a custom tailwind.config.js file, you can use our custom values of this file with the theme import available in twin.macro.

twin.macro only uses the theme and plugins variables available in tailwind.config.js

Example

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        electric: '#db00ff',
        ribbon: '#0047ff'
      }
    }
  },
  plugins: []
}

So, we have our tailwind.config.js with custom variables, to use it, we need to import the theme in our application.

// React.js App Example
/** @jsx jsx **/
import { jsx } from '@emotion/core';
import tw, { css, theme } from 'twin.macro'  

const App = () => (
  <div
    css={[
      tw`flex flex-col items-center justify-center h-screen`,
      css({
        // Grab values from your config with the theme import
        background: `linear-gradient(
          ${theme`colors.electric`},
          ${theme`colors.ribbon`}
        )`
      })
    ]}
  >
    <h1>Hello World!</h1>
  </div>
)

export default App;

So, as you can see we create a custom linear-gradient using the custom colors that we add to tailwind.config.js. ${theme`color.electric`}

In some cases you need to import and use the jsx import for emotion to use the prop CSS in JSX elements.
/** @jsx jsx **/ import { jsx } from '@emotion/core';

You don't see the error?

Maybe you don't remember the TailwindCSS class that you want, maybe looks like ml-45 or ml-73?

twin.macro has a helpful suggestion if you write a wrong class twin.macro will show you something like that:

✕ ml-7 was not found

Try one of these classes:
ml-0 [0] / ml-1 [0.25rem] / ml-2 [0.5rem] / ml-3 [0.75rem] / ml-4 [1rem] / ml-5 [1.25rem] / ml-6 [1.5rem]
ml-8 [2rem] / ml-10 [2.5rem] / ml-12 [3rem] / ml-16 [4rem] / ml-20 [5rem] / ml-24 [6rem] / ml-32 [8rem]
ml-40 [10rem] / ml-48 [12rem] / ml-56 [14rem] / ml-64 [16rem] / ml-auto [auto] / ml-px [1px]

In order to help you remember and write the correct class you need.

Resources

Setting up React.js(CRA) with Tailwind CSS and CSS-IN-JS

Angel Martinez — Wed, 08 Jul 2020 20:56:53 +0000

I'll explain how install and configure Tailwind CSS / Emotion and twin.macro in a Single Project of React to improve the way we use styles in our projects.

Setting up our Project

The first step, is generate or create our React project in this case is using the create-react-app package, so we need to run the following command in the terminal or CMD:

npx create-react-app react-with-tw

Once the project creation is finished, enter to the folder cd react-with-tw

Install Dependencies

Now, we need to install all of the dependencies that we needed, inside the project run the following command in the terminal:

npm i tailwindcss twin.macro @emotion/core @emotion/styled

tailwindcss is the package of TailwindCSS with all the features and customization of Tailwind CSS.
@emotion/core and @emotion/styled they are libraries for writing a powerful CSS with JavaScript in our project.
twin.macro basically converts your Tailwind classes into CSS objects and shares them with @emotion to give you the power of writing with Styled Components.

So, once installed we can proceed to configure them and start using.

Configuration File of Tailwind CSS

Now, we start configure Tailwind CSS in our project, the first step is generate a configuration file, and then our tailwind.css file, so lets do it.

In the terminal, write the following command to generate a configuration file of tailwind.

npx tailwindcss init --full

With the --full flag we tell tailwind that we want is the full configuration file.

The output of this is the tailwind.config.js with the following code:

// tailwind.config.js
module.exports = {
  purge: [],
  target: 'relaxed',
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
...

In this file, you can customize all of the thing about tailwind (breakpoints, colors, margins and padding).

This file, is automatically generated in the root folder, but we need to move into the /src folder.

Configure our custom config location

In this step, we need to configure the route of our tailwind.config.js file, so, in the package.json we need to put the following code:

// package.json
"babelMacros": {
  "twin": {
    "config": "src/tailwind.config.js"
  }
},

If you have another path, change the config line.

Import Tailwind CSS in our Project

Here we need to import the base.min.css file that TailwindCSS has available from its node_module package, in your index.js or your entry point file put the following code to import the tailwind styles:

import 'tailwindcss/dist/base.min.css';

If you have a custom tailwind.css file for any reason, you can replace the base.min.css with your own file.

Using twin.macro

Now, we can use all of the features of tailwind / @emotion and twin.macro, here you can see some examples.

Pass props into a JSX elements

/** @jsx jsx */ import { jsx } from '@emotion/core'
import tw from 'twin.macro';

const MyComponent = () => {

    return (
        <h1 tw="text-blue-500 text-2xl" >Hello world</h1>
    )
}

export default MyComponent;

Create Styled Componets

import tw from 'twin.macro';

// Styled Components
const MyHeading = tw.h1`text-blue-500 text-2xl`; 

const MyComponent = () => {

    return (
        <MyHeading>Hello World</MyHeading>
    )
}

export default MyComponent;

Clone an Existing Styled Component

import tw from 'twin.macro';

// Styled Components
const MyButton = tw.button`border-2 px-4 py-2`
const MyPrimaryButton = tw(MyButton)`border-blue-500 bg-blue-500`; 

const MyComponent = () => {

    return (
        <MyPrimaryButton>My Button</MyPrimaryButton> 
    )
}

export default MyComponent;

Pass props and Conditional Styles

import tw, { styled } from 'twin.macro';

// Styled Components
const MyButton = tw.button`border-2 px-4 py-2`
const MyPrimaryButton = tw(MyButton)`border-blue-500 bg-blue-500`; 
const MyPrimaryButtonCustomizable = styled(MyPrimaryButton)(({isUppercase}) => [
    tw`mx-2`,
    isUppercase && tw`uppercase`
]);

const MyComponent = () => {

    return (
        <MyPrimaryButtonCustomizable isUppercase>My Button</MyPrimaryButtonCustomizable> 
    )
}

export default MyComponent;

Well, we have it, twin.macro within our project to take more advantage of using TailwindCSS. If you have anything to add or fix, feel free to let me know in the comments.

The repository with all ready to use: cra-template-tailwindcss-styled

Setting up Next.js(CNA) with Tailwind CSS

Angel Martinez — Mon, 11 May 2020 20:19:20 +0000

In this post i will explain the installation and configuration of TailwindCSS over Next.js project (create-next-app) in order to take full advantage of all the features provided by TailwindCSS.

Create a Next.js Project

The first step, is create Next.js Project, if you have already created, you can continue with the next step.

npx create-next-app tailwind-next && cd tailwind-next

Install TailwindCSS

Now, we need to install TailwindCSS on our project, so we should enter the following command in our terminal or CMD.

npm i tailwindcss

Generate Config file for TailwindCSS

Once we have TailwindCSS installed in our project, we need to create or generate a tailwind.config.js file to get all the tailwind features.

npx tailwindcss init --full

With the --full flag, we indicated to TailwindCSS that we want the complete configuration file, so the output in the tailwind.config.js is the following code:

// tailwind.config.js
module.exports = {
  purge: [],
  target: 'relaxed',
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: '#000',
      white: '#fff',
    ...

Edit config file to purge the code

Now, we have the full configuration of TailwindCSS if you need to change the colors, fonts or screen breakpoint, tailwind.config.js is the file where you can do it.

But now, we need to config the "purge", that will allow us to remove the TailwindCSS code that we dont use, so that our site is lighter and faster.

In the new version of TailwindCSS we can do this without install other dependecies, so first, check out the tailwind.config.js file, the first thing we see is the "purge" which is an array, in this array we put the routes or our files where we use TailwindCSS classes, for example, to refer to each file in our pages or components folder, we must put the following code:

// tailwind.config.js
module.exports = {
  purge: [
    './components/**/*.js',
    './pages/**/*.js',
  ],
  target: 'relaxed',
  ...

So, with this code, whenever we compile our CSS with NODE_ENV set to production, TailwindCSS will automatically purge unused styles from your CSS. TailwindCSS provides us with some extra purge settings, which you can read in the official documentation.

Create CSS file

In this step we need to create a app.css file in the root directory, and we put the following code:

/* app.css */
@tailwind  base;
@tailwind  components;
@tailwind  utilities;

And absolutely you can put your own code in this file.

Include Our CSS in app.js

To use TailwindCSS inside all of the project, we need to create an _app.js file in the pages folder with the following code:

// _app.js
import '../styles.css';

export default function MyApp({Component, pageProps}){
    return (
        <Component {...pageProps}/>
    )
}

As you can see, we import a styles.css file, but we dont have it, so lets work with that.

Install another dependecies

Finally, we need to install some dependecies, for finish the configuration of TailwindCSS, put the following commands:

npm install concurrently cross-env

The first dependency will allow us to execute several commands at once by writing a single command, and the second dependecy allows to change the NODE_ENV between production or development environments, so lets configure them.

Configure Scripts for our Project

Now, we need to configure some scripts, for compile TailwindCSS depending of the environment, so we need put the following code into the package.json in the scripts section:

// package.json
  "scripts": {
    "build-css": "cross-env NODE_ENV=production tailwindcss build app.css -o styles.css",
    "dev-css": "cross-env NODE_ENV=development tailwindcss build app.css -o styles.css",
    "next-dev": "next dev",
    "dev": "concurrently \"npm run next-dev\" \"npm run dev-css\"",
    "next-build":"next build",
    "build": "concurrently \"npm run next-build\" \"npm run build-css\"",
    "start": "next start"
  },

With this, now we will execute the script

npm run dev when we are in development, which basically compiles our next app and will generate the complete file of TailwindCSS.
npm run build command will build our next app and will generate the full purge styles.css for production environment.

So, We have it, TailwindCSS fully configured in our Next.js project, if you have comments or something to add, please let me know, I'm completely open to receiving them.

This publication was updated thanks to the advice of Sung M. Kim