There is a way to use TailwindCSS on this boilerplate ?

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.

[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