Comments (3)
Not sure what's going on here, I cloned your repo (and undid your changes, like your purge comments and switching to the conservative purge mode) and everything works the way I'd expect. Perhaps make sure you are on the latest version of node and try again? Closing since not actually an issue for us (everything works as expected) and this isn't like a blog template we offer for other people to use or provide support for. Curious to know if you figure out the issue though!
from blog.tailwindcss.com.
@laurosilvacom - what fixed this for me (not sure if this will cause other issues or not) was configuring purgecss to ignore everything in tailwind.css
, not just base
from blog.tailwindcss.com.
Hi! I encountered this issue as well and I found that this is an issue when deploying with Vercel. I just want to share the findings here in case someone else encountered this issue as well.
The debugging process
I added the following bash script to my build process to see what's happening in Vercel build worker.
ls -la && cat ./next.config.js
Here is the output that I got
16:27:51.948 | total 500
-- | --
16:27:51.948 | drwxr-xr-x 10 root root 4096 Sep 26 09:27 .
16:27:51.948 | drwxr-xr-x 1 root root 4096 Sep 26 09:27 ..
16:27:51.948 | -rw-r--r-- 1 root root 809 Sep 26 09:27 .eslintrc.js
16:27:51.948 | drwxr-xr-x 7 root root 4096 Sep 26 09:27 .git
16:27:51.948 | -rw-r--r-- 1 root root 386 Sep 26 09:27 .gitignore
16:27:51.948 | drwxr-xr-x 3 root root 4096 Sep 26 09:27 .next
16:27:51.948 | -rw-r--r-- 1 root root 908 Sep 26 09:27 next.config.js
16:27:51.948 | -rw-r--r-- 1 root root 6595 Sep 26 09:27 next.config.original.1601112471648.js
16:27:51.948 | -rw-r--r-- 1 root root 113 Sep 26 09:27 next-env.d.ts
16:27:51.948 | drwxr-xr-x 804 root root 32768 Sep 26 09:27 node_modules
16:27:51.948 | -rw-r--r-- 1 root root 1896 Sep 26 09:27 package.json
16:27:51.948 | -rw-r--r-- 1 root root 82 Sep 26 09:27 postcss.config.js
16:27:51.948 | -rw-r--r-- 1 root root 124 Sep 26 09:27 .prettierrc
16:27:51.948 | drwxr-xr-x 5 root root 4096 Sep 26 09:27 public
16:27:51.948 | -rw-r--r-- 1 root root 1645 Sep 26 09:27 README.md
16:27:51.948 | drwxr-xr-x 2 root root 4096 Sep 26 09:27 scripts
16:27:51.948 | drwxr-xr-x 8 root root 4096 Sep 26 09:27 src
16:27:51.948 | -rw-r--r-- 1 root root 4097 Sep 26 09:27 tailwind.config.js
16:27:51.948 | -rw-r--r-- 1 root root 800 Sep 26 09:27 tsconfig.json
16:27:51.948 | drwxr-xr-x 2 root root 4096 Sep 26 09:27 types
16:27:51.948 | drwxr-xr-x 2 root root 4096 Sep 26 09:27 utils
16:27:51.948 | -rw-r--r-- 1 root root 525 Sep 26 09:27 vercel.json
16:27:51.948 | -rw-r--r-- 1 root root 376147 Sep 26 09:27 yarn.lock
16:27:51.949 | module.exports = function(...args) {
16:27:51.949 | let original = require('./next.config.original.1601112471648.js');
16:27:51.949 | const finalConfig = {};
16:27:51.949 | const target = { target: 'experimental-serverless-trace' };
16:27:51.949 | if (typeof original === 'function' && original.constructor.name === 'AsyncFunction') {
16:27:51.949 | // AsyncFunctions will become promises
16:27:51.949 | original = original(...args);
16:27:51.949 | }
16:27:51.949 | if (original instanceof Promise) {
16:27:51.949 | // Special case for promises, as it's currently not supported
16:27:51.949 | // and will just error later on
16:27:51.949 | return original
16:27:51.949 | .then((orignalConfig) => Object.assign(finalConfig, orignalConfig))
16:27:51.949 | .then((config) => Object.assign(config, target));
16:27:51.949 | } else if (typeof original === 'function') {
16:27:51.949 | Object.assign(finalConfig, original(...args));
16:27:51.949 | } else if (typeof original === 'object') {
16:27:51.949 | Object.assign(finalConfig, original);
16:27:51.949 | }
16:27:51.950 | Object.assign(finalConfig, target);
16:27:51.950 | return finalConfig;
Notice that there are next.config.js
and next.config.original.1601112471648.js
. It seems like there is Vercel is injecting stuffs to the build process by replacing our next.config.js
file, while our original config is now renamed to next.config.original.1601112471648.js
.
Solution
My solution is to extract the classnames used for the tokens to a separate file
// code-highlighter-token.js
// needed to map token to tailwind classes
const tokenClassNames = {
tag: 'text-code-red',
'attr-name': 'text-code-yellow',
'attr-value': 'text-code-green',
deleted: 'text-code-red',
inserted: 'text-code-green',
punctuation: 'text-code-white',
'template-punctuation': 'text-code-green',
keyword: 'text-code-purple',
string: 'text-code-green',
'template-string': 'text-code-green',
function: 'text-code-blue',
boolean: 'text-code-red',
comment: 'text-gray-400 italic',
property: 'text-code-teal',
'property-access': 'text-code-teal',
dom: 'text-code-blue',
'method': 'text-code-teal',
class: 'text-code-yellow',
color: 'text-code-purple',
'function-variable': 'text-code-blue', // foo`something`; Here, foo is a function-variable
'variable': 'text-code-blue', // foo`something`; Here, foo is a function-variable
'interpolation-punctuation': 'text-code-teal',
'interpolation': 'text-code-red',
};
module.exports = tokenClassNames;
And tell tailwind about that file:
// tailwind.config.js
purge: {
mode: 'all',
content: [
'./next.config.js',
'./code-highlighter-token.js', // we add this file
'./src/**/*.{ts,tsx,js,jsx,mdx}',
],
And that's it! The classes should now be correctly excluded from purging.
from blog.tailwindcss.com.
Related Issues (7)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.tailwindcss.com.