Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application

NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project. Tech Stack: React TypeScript Tailwind CSS Next JS Creating a new project As with any new project, we'll create a new directory for our starter repo and initialize it with npm/yarn: mkdir next-ts-starter next-ts-starter yarn init cd Hit enter on everything if you don't want to configure your npm package yet. This will create a package.json file for you. That's all we need to start adding the other packages. Setting up TypeScript We'll add the TypeScript packages first, so later we can immediately add the typings. First, let's add the TypeScript package as a dev dependency: yarn add --dev typescript Then, we will need to create a new file in the root directory called : tsconfig.json { : { : , : [ , , ], : , : , : , : , : , : , : , : , : , : , : , : }, : [ , , ], : [ ] } "compilerOptions" "target" "es5" "lib" "dom" "dom.iterable" "esnext" "allowJs" true "skipLibCheck" true "strict" false "forceConsistentCasingInFileNames" true "noEmit" true "sourceMap" true "esModuleInterop" true "module" "esnext" "moduleResolution" "node" "resolveJsonModule" true "isolatedModules" true "jsx" "preserve" "include" "next-env.d.ts" "**/*.ts" "**/*.tsx" "exclude" "node_modules" Now let's start adding our packages. Installing React Installing react is straightforward. We'll only need to add the following npm packages: yarn add react react-dom And the TypeScript support packages: yarn add --dev @types/node @types/react Setting up Next JS First, we'll need to add the Next JS package: yarn add next Now let's go back to and add the Next JS scripts: packages.json ... : { : , : , : }, ... "scripts" "dev" "next dev" "build" "next build" "start" "next start" Then we'll need to create a file for the types: next-env.d.ts /// /// And optionally, we can create the file in which we can extend the webpack config, or add our environment variables: next.config.js .exports = { : , : { }, : { config; }, } module distDir 'build' publicRuntimeConfig // add your public runtime environment variables here with NEXT_PUBLIC_*** prefix webpack ( ) => config // extend your webpack configuration here return Now let's create the initial page and test if it works. Create a new directory called in the root, and inside create an file: pages index.tsx { FC } ; IndexPage: FC = { ; }; IndexPage; import from 'react' const => () return Hello, CodeChem! h1 h1 export default Tip : as with React 17, you don't need to add "import React from 'react';" in your component files anymore! Okay so now let's execute yarn dev and head to . You should see the "Hello, CodeChem!" heading. And that means everything works fine and we're ready to move on. http://localhost:3000 Setting up Tailwind CSS First, we'll need to install the tailwindcss package: yarn add tailwindcss Optionally, we can create the empty file in the root directory: tailwind.config.js .exports = { : , : { : [ ] }, : {}, : {}, : [], : { : , }, }; module important true purge content './pages/**/*.tsx' theme variants plugins future purgeLayersByDefault true Tip : to completely utilize the purging functionality, add your new folders in the second line with the tsx postfix. Next, we'll need to install the postcss-import package: yarn add postcss- @^ import 12.0 .0 At the time of writing this article, postcss-import version 13.0.0 is breaking the tailwind implementation, therefore we will explicitly use the ^12.0.0 version. Then create a new file file: postcss.config.js .exports = { : [ , , , ], }; module plugins 'postcss-import' 'tailwindcss' 'autoprefixer' In order to include Tailwind into our app, first we'll need to create a new CSS file in the root directory that includes Tailwind CSS. You can name this as you wish. We'll name it for now: global.css @ ; @ ; @ ; import 'tailwindcss/base' import 'tailwindcss/components' import 'tailwindcss/utilities' Now, in order to include it in our app, we'll need to override Next JS's page by creating a new file: : _app.tsx pages/_app.tsx { FC } ; { AppProps } ; ; App: FC = ; App; import from 'react' import from 'next/app' import '../global.css' const ( ) => { Component, pageProps }: AppProps export default So to validate that everything works, let's head back to and add a tailwind class to the like so: index.tsx Hello, CodeChem! Hello, CodeChem! h1 className "text-green-500" h1 Execute yarn dev and go to . You should see the label with smaller font size than previously and with green text color. http://localhost:3000 Bonus For better code consistency and developer experience, let's install and configure the Prettier and Eslint plugins to work with TypeScript. Eslint First, let's install Eslint and its React plugins: yarn add --dev eslint eslint-plugin-react eslint-plugin-react-hooks Then we need to add Eslint's typings: yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser With that in place, let's create the Eslint config file in the root directory: .eslintrc.js .exports = { : , : [ , , , ],. parserOptions: { : , : , : { : , }, }, : { }, : { : { : , }, }, }; module parser '@typescript-eslint/parser' extends 'plugin:react/recommended' 'plugin:@typescript-eslint/recommended' 'plugin:react-hooks/recommended' ecmaVersion 2020 sourceType 'module' ecmaFeatures jsx true rules settings react version 'detect' And that's it! If you're using Visual Studio Code and Eslint doesn't automatically start, a reload won't hurt. Also, since you don't need to import React since React 17, Eslint might still suggest you do. In order to fix that, head to and add the following line in the rules section: .eslintrc.js : , 'react/react-in-jsx-scope' 'off' Prettier To top it off, we'll add Prettier into the mix! Let's start by installing the Prettier package and the Eslint plugin: yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier Now let's create a file in the root directory: .prettierrc.js .exports = { : , : , : , : , : , : }; module semi true trailingComma 'all' singleQuote true printWidth 120 tabWidth 4 quoteProps 'preserve' And to configure Eslint to work with Prettier, let's head back to to add the Prettier extensions in the array: .eslintrc.js extends , , 'prettier/@typescript-eslint' 'plugin:prettier/recommended' Your final should look like this: .eslintrc.js .exports = { : , : [ , , , , , ], : { : , : , : { : , }, }, : {}, : { : { : , }, }, }; module parser '@typescript-eslint/parser' extends 'plugin:react/recommended' 'plugin:@typescript-eslint/recommended' 'plugin:react-hooks/recommended' 'prettier/@typescript-eslint' 'plugin:prettier/recommended' parserOptions ecmaVersion 2020 sourceType 'module' ecmaFeatures jsx true rules settings react version 'detect' And that's it! You can push this in a separate GitHub project and use it as a starter for your new projects. Previously published at https://nikolovlazar.com/an-easy-react-17-typescript-tailwind-css-nextjs-setup