CODEWITHSUNDEEP
reactjstailwind-cssvitecore-ui
10YAR
10YAR

Reputation: 11

CoreUI React + Tailwind compatibility

I'm currently working with a CoreUI React template, I started from their github repo.

But I also want to use Tailwind, so I installed it by following the usual way : npm install autoprefixer postcss postcss-cli tailwindcss

Then created a tailwind.config.js and postcss.config.js on the root of project.

postcss.config.js content:

module.exports = {
  plugins: [require('tailwindcss')(), require('autoprefixer')()],
}

tailwind.config.js content:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Also added a style.css file to ./assets/css/style.css with content:

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

And imported it in the index.js file :


import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import 'core-js'
import './assets/css/style.css'

import App from './App'
import store from './store'

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

Which is then loaded like this on the browser :

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/assets/css/index.css");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/app/src/assets/css/index.css"
const __vite__css = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

package.json have these dependencies :


  "scripts": {
    "build": "vite build",
    "lint": "eslint \"src/**/*.js\"",
    "serve": "vite preview",
    "start": "vite",
    "dev": "vite --host"
  },
  "dependencies": {
    "@coreui/chartjs": "^4.0.0-rc.0",
    "@coreui/coreui": "^5.0.0-rc-2",
    "@coreui/icons": "^3.0.1",
    "@coreui/icons-react": "^2.2.1",
    "@coreui/react": "^5.0.0-rc.3",
    "@coreui/react-chartjs": "^3.0.0-rc.0",
    "@coreui/utils": "^2.0.2",
    "@popperjs/core": "^2.11.8",
    "axios": "^1.6.8",
    "chart.js": "^4.4.2",
    "classnames": "^2.5.1",
    "core-js": "^3.36.1",
    "cronstrue": "^2.49.0",
    "js-cookie": "^3.0.5",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.1",
    "redux": "5.0.1",
    "simplebar-react": "^3.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "prettier": "3.2.5",
    "sass": "^1.72.0",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.2"
  }

So the basic installation of tailwindcss on React, but it doesn't work. Even after restarting Vite. When I add for example "block" in classNames attribute of an element, there are no styles applied to it, no "display: block" css.

I believe that it is caused by CoreUI, there must be something different to do to make it work, but I don't know what.

Tried to reinstall tailwindcss / autoprefixer / postcss. Looked for documentation on the internet. Tried to contact CoreUI support, no reply.

EDIT: You can make it work by using the CDN version of tailwind css, i know it's not really a solution but if it can help others..

I added this tag between of the index.html file in the root:

<script src="https://cdn.tailwindcss.com"></script>

Upvotes: 0

Views: 355

Answers (1)

10YAR
10YAR

Reputation: 11

EDIT: You can make it work by using the CDN version of tailwind css, i know it's not really a solution but if it can help others..

I added this tag between head tags of the index.html file in the root:

<script src="https://cdn.tailwindcss.com"></script>

Upvotes: 1

Related Questions