Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] missing default configs in tailwind.css file

See original GitHub issue



Reproduction link

Operating System

windows 10



Browser & Version


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, grid-cols-3 to 10 are missing from tailwind.css, but it’s also at colors like bg-lightBlue-100 etc.


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%” }, }, { [@media (min-width: ${})]: { “.container”: { “max-width”: “640px”, }, }, }, { [@media (min-width: ${})]: { “.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”, }, }, }, ]); }), ] `

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

kuzdogancommented, May 5, 2021

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: [
    options: {
      safelist: process.env.NODE_ENV === 'production' ? [] : safeList,

Edit: Added some useful regex’s for safeList

lironmocommented, Apr 21, 2021

in production you should use this option-- it’s should recognize your used attribute when you build the CSS - checked it works great. see

Read more comments on GitHub >

github_iconTop Results From Across the Web

Configuration - Tailwind CSS
Any missing sections will fall back to Tailwind's default configuration. ​. Creating your configuration file. Generate a Tailwind config file for your project ......
Read more >
Change The `content` option in your Tailwind CSS ... - GitHub
Change The `content` option in your Tailwind CSS configuration is missing or empty.
Read more >
Tailwind CSS classes is not working in my project?
This error is due to tailwind not finding any classes to scan in what it 'thinks' is your HTML code directories.
Read more >
Tailwind CSS Tutorial #5 - Tailwind Config - YouTube
Hey gang, in this tailwind css tutorial we'lltake a look at how we can customize our tailwind setup using a tailwind config file....
Read more >
Tips for your Tailwind Config - Viget
Tailwind CSS is an easy tool to pick up, but there are a lot of ways ... with no bloat and a file...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found