other-emerald
other-emerald14mo ago

Headless UI tailwind not working

install tailwind and create a .global.css on the folder the settings on the content scope is right did I miss setting up tailwind on refine?
No description
4 Replies
kapa.ai
kapa.ai14mo ago
Hi @pkalib. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- To set up Tailwind CSS in a refine project, follow these steps: 1. Install Tailwind CSS and other necessary packages:
npm i -D tailwindcss postcss autoprefixer
npm i -D tailwindcss postcss autoprefixer
2. Initialize Tailwind CSS:
npx tailwindcss init -p
npx tailwindcss init -p
3. Update the tailwind.config.js file to include the content scope:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
4. Create a src folder in the root folder of the project. Inside it, create a styles subfolder and add a global.css file. 5. Open the global.css file and add the @tailwind directives for each of Tailwind layers at the top of the file:
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
6. Import global.css into your pages/_app.tsx or App.tsx file:
import 'src/styles/global.css';
import 'src/styles/global.css';
Now you should have Tailwind CSS set up in your refine project. If you followed these steps and still have issues, please double-check your configuration and file paths. Source: Adding Tailwind CSS for styling (https://refine.dev/blog/next-js-pwa/#adding-tailwind-css-for-styling) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Build a Progressive Web App (PWA) with Next.js | refine
We will walk you through the entire process of building a PWA using Next.JS and refine framework, from start to finish!
kapa.ai
kapa.ai14mo ago
<@329809837338656770> kapa.ai is still learning and improving, please let us how it did by reacting below
exotic-emerald
exotic-emerald14mo ago
tailwind with refine usage not different from any react application you can check our examples using tailwind: https://github.com/refinedev/refine/tree/next/examples/finefoods-client https://github.com/refinedev/refine/tree/next/examples/store