DEV Community

Cover image for [1][DEV NOTE] Initial turbo project and add tailwindcss library
CodeForStartUp
CodeForStartUp

Posted on

2 1 1 1 1

[1][DEV NOTE] Initial turbo project and add tailwindcss library

This is dev note for this project: turbo - nextjs - prisma - postgres blog

Prepare environments

ENV: node v16.20.1
In this project, I use pnpm. So that we need to install pnpm by:

npm install pnpm -g

Init project

Firstly, we need to create project by this command:
pnpm dlx create-turbo@lasted

Enter project name: "codeforstartup"

Create turbo project

Start project

turbo dev

Add tailwindcss

Add tailwind-config package

  1. Under packages folder, create tailwind-config folder.
  2. Under tailwind-config folder create: File packages/tailwind-config/package.json
{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}
Enter fullscreen mode Exit fullscreen mode

File packages/tailwind-config/tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
    content: [
        // app content
        "./app/**/*.{js,ts,jsx,tsx}"
        // include packages if not transpiling
        // "../../packages/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Nice. You added tailwind-config successfully. Now we need to install it by:
pnpm install

Install tailwindcss and tailwind-config for web app

To config tailwindcss for web app, we need to install following package:
pnpm add tailwindcss postcss autoprefixer --filter web

To install tailwind-config package for web, we can use this command:
pnpm add --save-dev tailwind-config@workspace --filter web

Create apps/web/postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
Enter fullscreen mode Exit fullscreen mode

Create apps/web/tailwind.config.js:

const sharedConfig = require("tailwind-config/tailwind.config.js");

module.exports = {
    presets: [sharedConfig],
};
Enter fullscreen mode Exit fullscreen mode

Create apps/web/app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
Enter fullscreen mode Exit fullscreen mode

In the apps/web/app/layout.tsx, import this line:

import "./global.css";
Enter fullscreen mode Exit fullscreen mode

Now, we install tailwind css successfully for turbo project.

Reference

[1] For more detail, you can referent this Pull request: [feat] Add tailwind css package
[2] Turbo official example
[3] Create new turbo project
[4] Install package for turbo project

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Collapse
 
timonwa profile image
Timonwa Akintokun

Nice and concise guide for adding Tailwind CSS to a Turbo project! Thanks for sharing the steps. 👏

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site