Question 297002 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Tailwind setup not working on vercel-tuborepo with react

I was trying to setup tailwind css with my react monorepo created using vercel-turborepo
I simply used the example from vercel to setup monorepo with create-react-app then i tried copying the same files which they have provided to setup the repo with tailwind but it is not working
The css is not getting applied to any component

This is my react monorepo folder structure in which
1] react-monorepo = project folder
2] apps = contains two react apps client and admin also included simple CRUD API’s with express
3] node_modules = common node modules of entire project
4] packages folder = contains common component of two react app inside ui folder and other folder includes shared configs
5] apps and package are two workspace defined in root level package.json of react-monorepo folder

Here are the contains of key files

1] package.json from apps/admin

{
  "name": "admin",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*",
    "clean": "rm -rf build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "ui": "*",
    "web-vitals": "^2.1.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^18.17.2",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/testing-library__jest-dom": "^5.14.5",
    "eslint-config-custom": "*",
    "tsconfig": "*",
    "typescript": "^4.5.3",
    "postcss": "^8.4.20",
    "tailwind-config": "*",
    "tailwindcss": "^3.2.4",
    "autoprefixer": "^10.4.13"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

2] tailwind.config from apps/admin/tailwind.config.ts

import type { Config } from "tailwindcss";
import sharedConfig from "tailwind-config/tailwind.config.ts";

const config: Pick<Config, "presets"> = {
  presets: [sharedConfig],
};

export default config;

3] postcss.config.js from apps/admin/postcss.config.js

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors

// eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4] index.css from apps/admin/src/index.css

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

5] shared tailwind config package.json from packages/tailwind-config/package.json

{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "files": ["tailwind.config.ts"],
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

6] ** shared tailwind config from packages/tailwind-config/tailwind.config.ts**

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./apps/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

7] shared ui components package.json from packages/ui/package.json

{
  "name": "ui",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "sideEffects": false,
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsup src/index.tsx --format cjs --dts --external react",
    "clean": "rm -rf dist",
    "dev": "tsup src/index.tsx --format cjs --watch --dts --external react",
    "lint": "eslint src/**/*"
  },
  "devDependencies": {
    "@types/react": "^17.0.13",
    "@types/react-dom": "^17.0.8",
    "eslint": "^8.4.1",
    "eslint-config-custom": "*",
    "react": "^17.0.2",
    "tsconfig": "*",
    "tsup": "^6.0.1",
    "typescript": "^4.5.3",
    "postcss": "^8.4.20",
    "tailwind-config": "*",
    "tailwindcss": "^3.2.4",
    "autoprefixer": "^10.4.13"
  }
}

8] shared ui components tailwind config from packages/ui/tailwind.config.ts

// tailwind config is required for editor support
import type { Config } from "tailwindcss";
// eslint-disable-next-line import/no-extraneous-dependencies
import sharedConfig from "tailwind-config/tailwind.config.ts";

const config: Pick<Config, "prefix" | "presets"> = {
  prefix: "ui-",
  presets: [sharedConfig],
};

export default config;

**9] the postcss.config.js from packages/ui/postcss.config.js is same as apps/admin/postcss.config.js (3rd)
10] the index.css from packages/ui/src/index.css contains tailwind imports and the css file is also imported in index.tsx from packages/ui/src/index.tsx
**
Let me know in comments if you need more inputs from my side .

Your help is appreciated thanks in advance !

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    What is difference between using presets and just spreading the object from shared config ? like this

    /** @type {import('tailwindcss').Config} */

import sharedConfig from "tailwind-config/tailwind.config.ts";

module.exports = {
  ...sharedConfig
}

  2. 0

    This sounds like a perfect use case for Tailwind presets.

    The presets option lets you specify a different configuration to use as your base, making it easy to package up a set of customizations that you’d like to reuse across projects.

    If you like this approach, you can define the main config file in your shared tailwind-config package and then use it as a preset in each of the other projects.

    1. Create a new file called tailwind-preset.js
    2. Add all of your preferred configurations. Ex:
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui"), require("@tailwindcss/typography")],
};
    1. Add the preset to the other tailwind.config.js files
    /** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("../../packages/tailwind-config/tailwind-preset.js")],
};

    This GitHub comment offers a different solution for managing shared configs in a monorepo.

    Also see the section on installing Tailwind in a React app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search