Instagram-like CSS class names obfuscation for NextJS 14 with SWC
I noticed that Instagram Direct often use Tailwind CSS for class names. But somehow they managed to transform it to non-readable format (obfuscation), so people could not run bots for content crawling. I Googled many solutions, but seems like such feature is not requested by wide audience.
Did somebody managed to achieve similar result with Tailwind CSS in NextJS 14 with SWC? Would be glad if you share your solution. It would be preferable if the solution doesn't negatively affect runtime performance.
Solution
They don't use TailwindCSS at all, they use StyleX.
Classes that start with x come from here: Low-cost Abstractions
- Dynamically build classnames in TailwindCss
- how to clear form after submit in next js?
- Next.js pass NODE_ENV to client
- Nextjs client-side rendering not working?
- NextJs + supabase not deploying supabaseUrl is required
- TypeError: Cannot read properties of undefined (reading 'join')
- NextJS Image component with fixed witdth and auto height
- Passing props to Layout for dynamic routes (App Router) in Next.js 13
- Color inversion issue when navigating to non-existent pages in Next.js with Tailwind
- Can I create an alias for the name of a route?
- unable to await for promise in loop to prevent stall request
- AWS Amplify CustomerError: Cannot read 'next' version in package.json
- How to properly configure Next.js as a frontend and Express app as a backend?
- Next.JS - Access `localStorage` before rendering page
- Next.js Static Site Generation Issue: searchParams.toJSON Error During Build
- Use process.env variables inside next.config.js
- NextJS: Why NextResponse.redirect is not triggering on production
- next.js dynamic route || TypeError: Cannot destructure property 'id' of 'router.query' as it is undefined
- In Next JS app unable to set the link title with dynamic routes
- Can react manipulate content from a CMS?
- How to fix x does not exist on type AppRouterInstance in Next.js 13?
- NextJS middleware does not seem to be triggered
- Type error: Page "..." has an invalid "default" export: Type "..." is not valid in Next.js
- React server component sends too many http requests for rsc payload
- Next.js does not send cookies with fetch request even though credentials are included
- next.js 13 build error for private identifiers when using openai 4.0 package
- How to get a session object in the server side in next.js 14?
- Auth.js v5 Database Session Strategy for Credential Provider Returning Null
- next/image does not load images from external URL after deployment
- Server action on NextJS always return an empty dictionary instead of actual return value