Closed safranx closed 2 years ago
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
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.
maybe. As I said if you give me minimal example repo without any business logic inside I can try to see what blocks it
I have the same issue and put together an example branch: https://github.com/Silthus/betonquest-editor/tree/issues/cra-boilerplate-tailwindcss
Thank you @Silthus for the example repo, what do you think about it @Can-Sahin ?
Description
I am struggling to install/use
TailwindCSS
I am using v1.2.4 updated to React18.1.0
, react-router6.3.0
react-script5.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"
}
does the answer above fixes it?
no fixes it
Description
I am struggling to install/use
TailwindCSS
I am using v1.2.4 updated to React18.1.0
, react-router6.3.0
react-script5.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
Add the following declaration to
src/styles/global-style.ts
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.