1

I'm trying to use TailwindCSS and followed the installation process like below. But what I get is a tailwind.css file with only 369 lines which seems less than others' tailwind result files (and makes me unable to use tailwind styles). Are there any missing points?

My Process

  1. CRA-typescript -> install packages, didn't edit anything inside tailwindcss.config.js
npm install -D tailwindcss postcss autoprefixer postcss-cli
npx tailwindcss init
  1. postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
  1. changed index.css like this
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. create script and executed
"scripts": {
  //...
  "build:styles": "postcss src/index.css -o src/tailwind.css", 
}

Any insights appreciated. Thank you.

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
WoW
  • 21
  • 4
  • 1
    Tailwind only includes the classes you actually use by looking at your source code. You should make sure the tailwindcss config has the `content` root correctly set. – AKX Dec 19 '21 at 15:02

2 Answers2

0

It looks like Tailwind started to use JIT paradigm from v.3.0. They basically wanted to get rid of big CSS files during development process. So now we don't use purge to delete all unused styles at the end of development, but we just add new styles on the fly during development.

It is confusing for those who are coming from v.2. to v.3. So most important thing is to point our tailwind.config.js file to our templates with classes.

module.exports = {
  content: ['../templates/core/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

then using --watch in build process should adding new styles into our main css file automatically.

npx tailwindcss -i ./css/input.css -o ./css/style.css --watch

So our CSS files should never go into crazy MBs per file.

TomRavn
  • 1,134
  • 14
  • 30
  • 1
    Thanks for sharing. I tried watch options but tailwind still didn't work for me and also hard to find what I did wrong.. but I guess I'm one who is confused with v2 to v3. Followed https://tailwindcss.com/docs/guides/create-react-app and works fine for me. – WoW Jan 15 '22 at 08:38
0

I followed CRA+Tailwind official setup and found out it works perfectly. I think the main difference is related to config files. Below is what works.

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and executing react-scripts start is enough.

WoW
  • 21
  • 4