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

๐Ÿ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

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. ๐Ÿ‘

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more