Tailwind css not working in root page in CLOUDWAYS server

17 Views Asked by At

i have deployed next.js project on cloudways server first there was a routing issue that the sever coulnt find root page than i solved it through .htaccess file than the routing is solved but in the rootpage the css is not working and except root page css is working perfectly kindly give me a solution im using tailwind css

and it is working perfectly in localhost live server

.htacces


DirectoryIndex disabled
RewriteEngine On
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

.talwind.config.json

/** @type {import("tailwindcss").Config} */
module.exports = {
  content: [
    "./app/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
  ], 
  theme: {
    extend: {
      fontFamily: {
        cardo: ["var(--font-cardo)"],
        nunito: ["var(--font-Nunito)"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      colors: { green: "#424242" },
      backgroundColor: {
        green: "#424242",
      },
    },
  },
  plugins: [],
};

package.json

{
  "name": "roofing",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@srexi/purecounterjs": "^1.5.0",
    "animate.css": "^4.1.1",
    "aos": "^2.3.4",
    "next": "14.1.0",
    "react": "^18",
    "react-animated-cursor": "^2.11.2",
    "react-countup": "^6.5.0",
    "react-dom": "^18",
    "react-html5video": "^2.5.1",
    "react-icons": "^5.0.1",
    "react-paginate": "^8.2.0",
    "react-parallax": "^3.5.1",
    "react-plx": "^2.1.2",


    "react-slick": "^0.30.2",
    "react-transition-group": "^4.4.5",
    "sass": "^1.71.1",
    "slick-carousel": "^1.8.1",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8"
  }
}

i write my tailwindconfig package.json and htaccess file kindly have a look and suggest me a solution

page in local host

localhost page

page in server

cloudways server page

0

There are 0 best solutions below