frozen-sapphire•2y 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?

4 Replies

kapa.ai•2y 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•2y 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•2y ago

<@329809837338656770> kapa.ai is still learning and improving, please let us how it did by reacting below

sensitive-blue•2y 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