[Bug] missing default configs in tailwind.css file

[lironmo]

Version

latest

Reproduction link

https://codepen.io/

Operating System

windows 10

Device

pc

Browser & Version

latest

Steps to reproduce

1. look for grid-cols-4 in tailwind.css

   What is expected?

   all the default options that appear in the documentation would be built into the tailwind.css

   What is actually happening?

   not sure if it's really a bug - but it seems that some of the CSS definitions are missing comparing to the official tailwind documentation.

for example see https://tailwindcss.com/docs/grid-template-columns#class-reference, grid-cols-3 to 10 are missing from tailwind.css, but it's also at colors like bg-lightBlue-100 etc.

---

Solution

i tried to rebuild the tailwind.css via tailwind build src/assets/styles/index.css -o src/assets/styles/tailwind.css with no sucesuss, this is the configurations:

Additional comments

`

const plugin = require("tailwindcss/plugin"); const colors = require("tailwindcss/colors");

module.exports = { purge: { enabled: true, content: [ "./public//.html", "./public/.html", "./src//.js", "./src/.js", "./src//.html", "./src/.html", "./public//.js", "./public/.js", ], options: { safelist: [], }, }, theme: { colors: { transparent: 'transparent', current: 'currentColor', ...colors, }, extend: { minHeight: { "screen-75": "75vh", }, fontSize: { 55: "55rem", }, opacity: { 80: ".8", }, zIndex: { 2: 2, 3: 3, }, inset: { "-100": "-100%", "-225-px": "-225px", "-160-px": "-160px", "-150-px": "-150px", "-94-px": "-94px", "-50-px": "-50px", "-29-px": "-29px", "-20-px": "-20px", "25-px": "25px", "40-px": "40px", "95-px": "95px", "145-px": "145px", "195-px": "195px", "210-px": "210px", "260-px": "260px", }, height: { "95-px": "95px", "70-px": "70px", "350-px": "350px", "500-px": "500px", "600-px": "600px", }, maxHeight: { "860-px": "860px", }, maxWidth: { "100-px": "100px", "120-px": "120px", "150-px": "150px", "180-px": "180px", "200-px": "200px", "210-px": "210px", "580-px": "580px", }, minWidth: { "140-px": "140px", 48: "12rem", }, backgroundSize: { full: "100%", }, }, }, variants: [ "responsive", "group-hover", "focus-within", "first", "last", "odd", "even", "hover", "focus", "active", "visited", "disabled", ], plugins: [ require("@tailwindcss/forms"), plugin(function ({ addComponents, theme }) { const screens = theme("screens", {}); addComponents([ { ".container": { width: "100%" }, }, {

        ".container": {
          "max-width": "640px",
        },
      },
    },
    {
      [`@media (min-width: ${screens.md})`]: {
        ".container": {
          "max-width": "768px",
        },
      },
    },
    {
      [`@media (min-width: ${screens.lg})`]: {
        ".container": {
          "max-width": "1024px",
        },
      },
    },
    {
      [`@media (min-width: ${screens.xl})`]: {
        ".container": {
          "max-width": "1280px",
        },
      },
    },
    {
      [`@media (min-width: ${screens["2xl"]})`]: {
        ".container": {
          "max-width": "1280px",
        },
      },
    },
  ]);
}),

] `

[einazare]

Hello there, @lironmo ,

Thanks for sharing this with us. We'll check it out in our next update.

Best, Manu

[lironmo]

Thank @EINazare

[lironmo]

this is not a bug - it's related to the Tailwind configs. in order to get more properties of Tailwind need to remove the purge option, see https://github.com/tailwindlabs/tailwindcss/issues/4055

[lironmo]

in production you should use this option-- it's should recognize your used attribute when you build the CSS - checked it works great. see https://tailwindcss.com/docs/optimizing-for-production

[kuzdogan]

If you're wondering why this does not take effect after removing or disabling purge option, and restarting via npm start; you need to rebuild the tailwind.css file each time you add a previously unused class. For instance, if you haven't been using w-3/12, this won't be included in tailwind.css and you won't see it in action even after restart.

You can build the tailwind.css with npm run tailwind:build.

To avoid having to build each time a new class is added, you can safeList some of the frequently needed classes in development as such in tailwind.config.js:

const safeList = [/(\w?):?w-/, /^-?m(\w?)-/, /^p(\w?)-/, /^text-/, /^bg-/, 'underline'];

module.exports = {
  purge: {
    enabled: true,
    content: [
      './public/**/*.html',
      './public/*.html',
      './src/**/*.js',
      './src/*.js',
      './src/**/*.html',
      './src/*.html',
      './public/**/*.js',
      './public/*.js',
    ],
    options: {
      safelist: process.env.NODE_ENV === 'production' ? [] : safeList,
    },
  },
...

Edit: Added some useful regex's for safeList