'Tailwinds Css not recognized after deployment

After I run the build script in svelte project together with tailwind after deployment it does not recognize the styling of tailwind but it shows it as plain html.

Also how can I import the folder images in index.html or should I import them one by one ?

1.This is my package.json file

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "build": "yarn run build:tailwind && rollup -c",
    "start": "sirv public",
    "serve": "serve public -p 80",
    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "autoprefixer": "^10.0.4",
    "axios": "^0.26.1",
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "postcss": "^8.1.14",
    "postcss-cli": "^8.3.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "tailwind": "^4.0.0",
    "tailwindcss": "^2.0.1"
  },
  "dependencies": {
    "blueimp-md5": "^2.19.0",
    "filepond": "^4.30.3",
    "filepond-plugin-image-exif-orientation": "^1.0.11",
    "filepond-plugin-image-preview": "^4.6.11",
    "flowbite": "^1.4.1",
    "js-md5": "^0.7.3",
    "jshashes": "^1.0.8",
    "md5": "^2.3.0",
    "nodemon": "^2.0.15",
    "page": "^1.11.6",
    "password-hash": "^1.2.2",
    "sirv-cli": "^1.0.0",
    "svelte-filepond": "^0.2.0",
    "svelte-spa-router": "^3.2.0",
    "uuid": "^8.3.2"
  }
}

2.Tailwind config.js file

module.exports = {
  purge: ["./src/**/*.html", "./src/**/*.js"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },

 
};

3.This is the index.html file after building.

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    

    <link rel='icon' type='image/png' href='./favicon.png'>
    <!-- <link rel='stylesheet' href='./global.css'> -->
    <link rel='stylesheet' href='./build/bundle.css'>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./tailwind.css">

    <script defer src='./bundle.js'></script>
</head>

<body>
</body>
</html>

4.This is the postcss.config.js

    

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},

  },
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Tailwinds Css not recognized after deployment

Sources

Related Questions