There is a way to use TailwindCSS on this boilerplate ? about react-boilerplate-cra-template

[lyndon-baylin]

Description

I am struggling to install/use TailwindCSS I am using v1.2.4 updated to React 18.1.0, react-router 6.3.0 react-script 5.0.1 (everything works fine).

Steps to reproduce

> yarn create react-app --template cra-template-rb my-app > cd my app > yarn -D tailwindcss postcss autoprefixer > yarn tailwindcss init -p

Add the following code to tailwind.config.js

content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

Add the following declaration to src/styles/global-style.ts

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

Expected behavior

The css is not applied, css class are in the dom, but the tailwind's css isn't load.

Thank you for your help.

I think you forgot to include the index.html in the public folder into the content property of your tailwind.config.js that is why your TailwindCSS did not work.

Try to do it like this.

  content: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx,html}'],

This is my tailwind.config.js in my personal project that I currently working on using the latest release of the boilerplate at the time of this response. I have no issues of tailwindcss in my end. Hope this helps.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx,html}'],
  theme: {
    screens: {
      // Small devices (landscape phones, 576px and up)
      sm: '576px',
      // Medium devices (tablets, 768px and up)
      md: '768px',
      // Large devices (desktops, 992px and up)
      lg: '992px',
      // X-Large devices (large desktops, 1200px and up)
      xl: '1200px',
      // XX-Large devices (larger desktops, 1400px and up)
      xxl: '1400px',
    },
    fontFamily: {
      sans: [
        'Inter',
        '-apple-system',
        'BlinkMacSystemFont',
        'Helvetica Neue',
        'Helvetica',
        'sans-serif',
      ],
    },
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
};

Also this my devDependencies in package.json

"devDependencies": {
    "@tailwindcss/forms": "0.5.2",
    "autoprefixer": "10.4.7",
    "postcss": "8.4.14",
    "prettier-plugin-tailwindcss": "0.1.11",
    "tailwindcss": "3.1.4"
  }

[Silthus]

I have the same issue and put together an example branch: https://github.com/Silthus/betonquest-editor/tree/issues/cra-boilerplate-tailwindcss

[Can-Sahin]

I already used tailwind before. It was working. Removed it later though so cannot really remember. It wasn't a problem. There should be something you are missing I assume?. This is a create-react-app and if it works there it should work here too.

If you give example repo I can check as well

[safranx]

I tried with the official create-react-app typescript template, and I didn't have any issue, everything work fine.
Maybe it's a configuration issue (specific to this "ecosystem", like the .babel-plugin-macrosrc.js file or something like that.

[Can-Sahin]

maybe. As I said if you give me minimal example repo without any business logic inside I can try to see what blocks it

[safranx]

Thank you @Silthus for the example repo, what do you think about it @Can-Sahin ?

[Can-Sahin]

does the answer above fixes it?

[Alvazz]

no fixes it