Missing content

[MaluNoPeleke]

As described in #466 not all content gets imported in the production ready css. These are the two css files:

tailwind.css

@import './custom.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

custom.css

/* Add a black background color to the top navigation */
.topnav {
    background-color: #005F60;
    overflow: hidden;
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    font-size: 18px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #F78104;
    color: white;
  }

  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }

  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav .social {
      display: none!important;
    }
    .topnav .search {
      display: none!important;
    }
  }

  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .social {
      display: block!important;
      float: left;
      text-decoration: none;
      filter: invert(100%);
    }
    .topnav.responsive .search {
      display: block!important;
    }
  }

  .fa {
    display: inline-block;
    font: normal normal normal 14px/1 sans-serif;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    .fa-bars:before {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY29udGVudFNjcmlwdFR5cGU9InRleHQvZWNtYXNjcmlwdCIgY29udGVudFN0eWxlVHlwZT0idGV4dC9jc3MiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwNDggMjA0OCIgaGVpZ2h0PSIyMDQ4cHgiIGlkPSJMYXllcl8xIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAuMCAwIDE1MzYuMCAyMDQ4IiB3aWR0aD0iMTUzNi4wcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHpvb21BbmRQYW49Im1hZ25pZnkiPjxwYXRoIGQ9Ik0xNTM2LDE0NzJ2MTI4YzAsMTcuMzMzLTYuMzMzLDMyLjMzMy0xOSw0NXMtMjcuNjY3LDE5LTQ1LDE5SDY0Yy0xNy4zMzMsMC0zMi4zMzMtNi4zMzMtNDUtMTlzLTE5LTI3LjY2Ny0xOS00NXYtMTI4ICBjMC0xNy4zMzMsNi4zMzMtMzIuMzMzLDE5LTQ1czI3LjY2Ny0xOSw0NS0xOWgxNDA4YzE3LjMzMywwLDMyLjMzMyw2LjMzMyw0NSwxOVMxNTM2LDE0NTQuNjY3LDE1MzYsMTQ3MnogTTE1MzYsOTYwdjEyOCAgYzAsMTcuMzMzLTYuMzMzLDMyLjMzMy0xOSw0NXMtMjcuNjY3LDE5LTQ1LDE5SDY0Yy0xNy4zMzMsMC0zMi4zMzMtNi4zMzMtNDUtMTlzLTE5LTI3LjY2Ny0xOS00NVY5NjBjMC0xNy4zMzMsNi4zMzMtMzIuMzMzLDE5LTQ1ICBzMjcuNjY3LTE5LDQ1LTE5aDE0MDhjMTcuMzMzLDAsMzIuMzMzLDYuMzMzLDQ1LDE5UzE1MzYsOTQyLjY2NywxNTM2LDk2MHogTTE1MzYsNDQ4djEyOGMwLDE3LjMzMy02LjMzMywzMi4zMzMtMTksNDUgIHMtMjcuNjY3LDE5LTQ1LDE5SDY0Yy0xNy4zMzMsMC0zMi4zMzMtNi4zMzMtNDUtMTlTMCw1OTMuMzMzLDAsNTc2VjQ0OGMwLTE3LjMzMyw2LjMzMy0zMi4zMzMsMTktNDVzMjcuNjY3LTE5LDQ1LTE5aDE0MDggIGMxNy4zMzMsMCwzMi4zMzMsNi4zMzMsNDUsMTlTMTUzNiw0MzAuNjY3LDE1MzYsNDQ4eiIvPjwvc3ZnPg==");
        background-size: 16px 16px;
        display: inline-block;
        width: 16px; 
        height: 16px;
        content:"";
        filter: invert(100%);
        -webkit-filter: invert(100%);
        transform: scale(1.5);
    }

.header {
    position: sticky;
    top: 0;
}

.header .logo {
  display: block;
  float: left;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: white!important;
  margin-right: 0%;
}

.header .menu {
  display: block;
  text-decoration: none;
}

.header .social {
  display: block;
  float: right;
  text-decoration: none;
  filter: invert(100%);
}

.header .search {
  float: left;
  padding: 14px;
}

.current-link {
  color: #F78104!important;
  font-weight: bold;
}

.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
    background-color: #F78104;
    background-color: #005F60;
    background-color: #008083;
}

figure { width: 100%; }
img[data-sizes="auto"] { display: block; width: 100%; }
.lazysrcset-ratio {
  @apply relative;
  & > img {
      @apply absolute top-0 left-0 w-full h-full block;
      &:after {
          content: '';
          @apply block h-0 w-full;
      }
  }
}
/* class name must matches the value of `ratio` setting. */
.lazysrcset-ratio {  
  position: relative;
}
.lazysrcset-ratio > img {
  display: block;    
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.lazysrcset-ratio > img:after {
  display: block;
  width: 100%;
  height: 0;
  content: '';
}

Everything from this line downwards isn't included from the custom.css: img[data-sizes="auto"] { display: block; width: 100%; }

[RyanZim]

Working fine for me without tailwind; please post the version numbers of postcss, postcss-import, etc. and your postcss.config.js

[MaluNoPeleke]

PostCSS version 8.3.6 PostCSS-Import version 14.0.2

package.json

{
  "name": "kirbytest",
  "version": "1.0.0",
  "description": "My Kirby project",
  "main": "index.js",
  "scripts": {
    "build": "postcss site/postcss/tailwind.css -o assets/css/style.css",
    "watch": "postcss site/postcss/tailwind.css -o assets/css/style.css --watch",
    "prod": "cross-env NODE_ENV=production postcss site/postcss/tailwind.css -o assets/css/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.3.1",
    "cross-env": "^7.0.3",
    "cssnano": "^5.0.7",
    "postcss-cli": "^8.3.1",
    "postcss-import": "^14.0.2",
    "postcss-nesting": "^8.0.1",
    "tailwindcss": "^2.2.7"
  }
}

postcss.config.js

const cssnano = require('cssnano');
module.exports = {
    plugins: [
      require('postcss-import')({ path: "site/postcss/", root: "site/postcss/", from: "site/postcss/" }),
      require('tailwindcss'),
      require('postcss-nesting'),
      require('autoprefixer'),
      ...process.env.NODE_ENV === 'production'
            ? [cssnano({
              preset: 'default',
            })]
            : []
    ]
  }

tailwind.config.js

module.exports = {
    purge: {
        preserveHtmlElements: true,
        mode: 'all',
        enabled: true,
        content: [
            './site/templates/*.php',
            './site/snippets/*.php',
            './site/tailwind/*.css',
        ],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/typography'),
    ],
}

[RyanZim]

From looking at your setup; I don't think you should need to pass any options to postcss-import in your config. Does removing them make any difference?

[MaluNoPeleke]

No and I also just discovered that the following styles also don't get imported (they are put above the figure one) but I cannot find the styles within the styles.css:

.current-link {
  color: #F78104!important;
  font-weight: bold;
}

.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
    background-color: #F78104;
    background-color: #005F60;
    background-color: #008083;
}

[RyanZim]

You'll need to create a reduced test case to debug this. Remove things one-by-one until you get down to the smallest setup that will reproduce the problem.

[MaluNoPeleke]

It works if I enable Tailwinds JIT mode so it seems to be an issue with Tailwind...