Tutorial
Aug 21, 202622 views

How to Authenticate Your Domain on SendGrid (GoDaddy DNS)

Authenticate your domain on SendGrid using GoDaddy DNS — the CNAME records, the Host field mistake that breaks most setups, and the DMARC record SendGrid does not create but Gmail now requires.

SendgridDomainGodaddy
VS
Vikash SinghUpdated Nov 28, 2025
Likes0
Shares0
22 views · 22 YouTube viewsAug 21, 2026

TL;DR

Run SendGrid's domain authentication with Automated Security on, then add the CNAMEs in GoDaddy using only the prefix in the Host field — GoDaddy appends your domain automatically, and pasting the full hostname is what breaks most setups. Then add a DMARC TXT record at _dmarc yourself, because SendGrid does not.

Walkthrough

Step-by-step.

Sending email from an unauthenticated domain in 2026 means most of it lands in spam, and a growing share gets rejected outright.

Authenticating your domain on SendGrid fixes that. It takes about fifteen minutes, most of which is waiting for DNS.

This guide covers the SendGrid setup, the GoDaddy specifics that trip people up, and the DMARC record that SendGrid does not create for you but Gmail now requires.

What Domain Authentication Actually Does

By default, SendGrid sends on your behalf using its own domain. Recipients see "via sendgrid.net" in Gmail, and mailbox providers treat the message as less trustworthy because nothing links it to you.

Domain authentication proves you own the sending domain. Once it is in place, SPF and DKIM both align with your domain, the "via" disappears, and providers have a verifiable identity to build a sending reputation against.

Three mechanisms are involved:

SPF lists which servers may send for your domain. DKIM cryptographically signs each message so tampering is detectable. DMARC tells receiving servers what to do when a message fails the first two, and where to send reports.

SendGrid's domain authentication sets up the first two. The third is on you, and it is now the one that matters most.

Why DMARC Is No Longer Optional

In February 2024, Google and Yahoo changed their requirements for bulk senders. A published DMARC record is now part of the baseline, alongside SPF and DKIM alignment and a one-click unsubscribe on marketing mail.

Microsoft has since moved in the same direction.

If you send meaningful volume to Gmail or Yahoo addresses without a DMARC record, expect rejections rather than spam-foldering. Completing SendGrid's wizard alone does not satisfy this.

Adding the record takes two minutes. It is covered below.

Step 1: Start Domain Authentication in SendGrid

Sign in to SendGrid. Go to Settings, then Sender Authentication, then Authenticate Your Domain.

Select GoDaddy as your DNS host. This only changes the on-screen instructions; the records are the same regardless.

Choose whether to brand the links in your email. This rewrites tracking links to use your domain instead of SendGrid's, and it is worth enabling — recipients hovering a link see your domain rather than an unfamiliar one. It adds two more CNAME records.

Enter your domain. Use the root domain, yourdomain.com, not a subdomain and not www.

A note on the subdomain. SendGrid uses a sending subdomain such as em1234.yourdomain.com. You can set a custom one under advanced settings. Many teams use a dedicated subdomain like mail.yourdomain.com or send.yourdomain.com for bulk email specifically, which keeps the reputation of transactional mail separate from marketing mail. Worth deciding now, because changing it later means redoing the DNS.

Leave Automated Security enabled. It gives you CNAME records pointing at SendGrid, which means SendGrid can rotate DKIM keys without you touching DNS again. Turning it off gives you TXT records you have to maintain yourself.

SendGrid then shows you a table of DNS records. Keep that tab open.

Step 2: Add the Records in GoDaddy — and the Host Field Trap

Sign in to GoDaddy. Go to My Products, find your domain, click DNS.

Now the part that causes most failed verifications.

GoDaddy automatically appends your domain to whatever you put in the Host field.

SendGrid shows you a full hostname: em1234.yourdomain.com

If you paste that whole string into GoDaddy's Host field, GoDaddy stores it as em1234.yourdomain.com.yourdomain.com. The record exists, it looks correct in your DNS list at a glance, and verification fails with no useful explanation.

Enter only the part before your domain. For em1234.yourdomain.com, the Host value is em1234.

The Value field is different — that one takes the full target exactly as SendGrid gives it, usually something like u1234567.wl123.sendgrid.net.

So for each record SendGrid lists:

Type: CNAME
Host: the prefix only, with your domain stripped off
Value: the full value, copied exactly
TTL: 1 hour, or GoDaddy's default

You will typically add three CNAMEs, or five if you enabled link branding.

Two of the DKIM hostnames start with s1._domainkey and s2._domainkey. GoDaddy accepts the leading underscore — enter them exactly as shown, minus the domain suffix.

Save each record. Copy and paste rather than typing; a single transposed character in a SendGrid subdomain is invisible to the eye and fatal to verification.

Step 3: Verify in SendGrid

Back in SendGrid, click Verify.

If it succeeds immediately, you are done with this part. If it fails, that is normal — DNS propagation usually takes minutes but can take up to 48 hours. Wait and retry rather than assuming you made a mistake.

Check what actually propagated before re-entering anything:

nslookup -type=CNAME em1234.yourdomain.com

If that returns the SendGrid target, the record is live and SendGrid will pick it up shortly. If it returns nothing, or returns something with your domain doubled up, you have found your problem.

Step 4: Add the DMARC Record

SendGrid will not do this. You add it manually in GoDaddy.

Type: TXT
Host: _dmarc
Value: v=DMARC1; p=none; rua=mailto:dmarc-reports@yourdomain.com
TTL: 1 hour

The p=none policy means monitor only — nothing gets rejected, but you receive aggregate reports showing everything sending as your domain. That is the correct starting point. It satisfies the Google and Yahoo requirement while you find out what is actually sending on your behalf.

Once reports look clean, usually after a few weeks, tighten to p=quarantine, and later p=reject.

Do not start at p=reject. If any legitimate system sends as your domain and is not covered by your SPF and DKIM — a CRM, an invoicing tool, a support desk, a marketing platform — that mail starts bouncing immediately. Almost every organisation has at least one such system that nobody remembers setting up.

The rua address receives XML reports. Point it at a real mailbox, or a free DMARC reporting service that parses them into something readable.

Step 5: Confirm It Worked

Send a test message to a Gmail address you control.

Open it, click the three dots, and choose "Show original."

You want to see SPF, DKIM, and DMARC all showing PASS, and the mailed-by and signed-by lines showing your domain rather than sendgrid.net.

If DKIM says PASS but DMARC fails, you have an alignment problem — the domain that signed the message does not match the visible From address. Check that your From address uses the same domain you authenticated.

Common Failures

Verification fails but the records look right in GoDaddy. Almost always the doubled domain from the Host field. Open a record and check whether GoDaddy displays it as em1234.yourdomain.com.yourdomain.com.

Only some records verify. One has a typo. Re-copy the failing one from SendGrid rather than re-typing it.

Verified in SendGrid, but Gmail still shows "via sendgrid.net". Your From address is on a different domain than the one you authenticated, or you are sending through a Single Sender identity rather than the authenticated domain.

Everything verified, mail still lands in spam. Authentication makes you identifiable, not trusted. Reputation is built over time. If the domain is new, ramp volume gradually rather than sending thousands on day one. Content and list hygiene matter too — high bounce rates and spam complaints damage reputation faster than authentication repairs it.

Existing SPF record conflict. A domain may only have one SPF TXT record. If you already have one for Google Workspace or another provider, merge the mechanisms into a single record rather than adding a second. Two SPF records is a permanent error, and it fails silently.

CNAME conflicts with an existing record. If GoDaddy refuses a CNAME, something else already occupies that hostname. Delete the old record first.

Keeping It Working

Do not delete the CNAMEs. With Automated Security enabled, SendGrid rotates DKIM keys through those records — removing them breaks authentication later, long after anyone remembers touching DNS.

Watch your DMARC reports for the first month. They will show you every system sending as your domain, including ones you did not know about.

If you move DNS providers, migrate these records with everything else. A registrar transfer that drops them takes your email deliverability with it.

And authenticate each sending domain separately. Authentication does not extend to other domains you own.

Where This Fits in a Real Project

Authentication is the foundation, not the whole job. Deliverability also depends on list quality, bounce and complaint handling, suppression management, and separating transactional from marketing traffic so a campaign cannot damage the reputation your password resets depend on.

Our team builds and ships production email infrastructure as part of client software — provider integration, webhook handling for bounces and opens, and the monitoring around it. You can see the stack we work across on our technologies page and browse shipped work in our projects portfolio.

If you are building the service that sends this mail, the Node.js server tutorial covers the backend, and the SSL certificate guide handles TLS on the host receiving your webhooks. For SMS alongside email, the Twilio sender ID guide covers the equivalent branding step.

More walkthroughs are on the tutorials hub, and longer technical writing lives on the blog.

Answers

Frequently asked.

Why does SendGrid domain authentication fail even though the GoDaddy records look correct?+

GoDaddy automatically appends your domain to the Host field. If you paste the full hostname SendGrid provides, the record is stored with your domain doubled. Enter only the prefix — em1234 rather than em1234.yourdomain.com

Does SendGrid set up DMARC for me?+

No. SendGrid's domain authentication configures SPF and DKIM through CNAME records. DMARC is a separate TXT record at _dmarc that you add yourself in your DNS provider.

Do I need DMARC to send email through SendGrid?+

If you send in bulk to Gmail or Yahoo addresses, yes. Both have required a published DMARC record since February 2024, and messages without one can be rejected rather than filtered.

How long does SendGrid domain verification take?+

Usually minutes, though DNS propagation can take up to 48 hours. If verification fails immediately, wait and retry before changing anything — and check with nslookup whether the record has actually propagated.

What DMARC policy should I start with?+

Start with p=none, which monitors without rejecting anything and satisfies the bulk sender requirement. Move to p=quarantine and then p=reject only after reports confirm all legitimate senders pass. Starting at p=reject will bounce mail from any system you forgot to authorise.

Why does Gmail still show "via sendgrid.net" after verification?+

Your From address is on a different domain than the one you authenticated, or you are sending through a Single Sender identity instead of the authenticated domain. Check that the From domain matches exactly.

Craxinno Service

Have a project in mind?

Our team has shipped production software for client apps — from initial integration to scaling, caching and cost optimisation. We’d love to help.

Was this tutorial helpful?Your feedback helps us prioritise what to publish next.

Continue with Tutorials.

View all tutorials
How to Enroll in the Apple Developer Program (Step-by-Step)
Apple Developer Account

How to Enroll in the Apple Developer Program (Step-by-Step)

Publishing an app on the App Store requires an Apple Developer Program membership. It costs 99 USD per year and enrollment takes anywhere from a day to several weeks. The length of that range depends almost entirely on one choice you make at the start: individual or organization. Get it wrong and you either wait weeks you did not need to, or ship an app with the wrong name on it permanently. Individual or Organization: The Decision That Matters Both cost the same. The difference is what customers see and what you can do. Individual Organization Seller name on the App Store Your personal legal name Your company name D-U-N-S Number required No Yes Team members in App Store Connect No — one Apple ID only Yes, with role-based access Typical approval time Hours to a few days One to several weeks Requirements Apple ID with two-factor authentication Registered legal entity, D-U-N-S Number, legal authority to sign The seller name is the part people regret. On an individual account, your legal name appears on your App Store listing where the developer name goes. Every customer sees it. There is no setting to display a company name instead. If you are building something under a brand, and particularly if you might sell the app or take on investors, enroll as an organization. Switching afterwards is not a settings change — it involves a separate enrollment and transferring your apps across. Individual enrollment is right for a personal project, a portfolio piece, a freelancer publishing under their own name, or anything you need live quickly. What You Need Before Starting For individual enrollment: an Apple ID with two-factor authentication enabled, and a payment method. That is it. A Managed Apple ID issued by a school or employer will not work. For organization enrollment: a legal entity registered in your country — a sole trader or DBA is generally not sufficient. A D-U-N-S Number for that entity. A public website on your company's domain. And you must have legal authority to bind the organization, or an authorised person available to confirm it. Getting a D-U-N-S Number A D-U-N-S Number is a nine-digit business identifier issued by Dun & Bradstreet. Apple uses it to verify your company exists. It is free. Apple provides a lookup tool that checks whether your company already has one — many registered businesses do without knowing it. If you do not have one, request it through Apple's lookup form rather than paying Dun & Bradstreet for expedited service. Turnaround is usually a few business days, though it can take longer in some countries. The details you register — legal entity name, address, phone number — must match your Apple enrollment exactly. A mismatch between your D-U-N-S record and what you type into Apple's form is the most common cause of a rejected organization enrollment. Not a wrong address; a differently formatted one. Step 1: Start Enrollment Individual enrollment now runs through the Apple Developer app on an iPhone or iPad in most regions, because it uses the device for identity verification. Download the app, sign in with your Apple ID, and choose Enroll. Organization enrollment can be completed on the web at developer.apple.com/programs/enroll. Either way, sign in with the Apple ID that will own this account. Choose carefully — this becomes the Account Holder, and moving it later is administratively painful. Use a company-controlled address such as appstore@yourcompany.com rather than a personal one or an individual employee's. Step 2: Provide Your Details For individuals, this is identity verification. You may be asked to scan a government ID. For organizations, you enter your legal entity name, D-U-N-S Number, address, and website. Enter these exactly as they appear on your D-U-N-S record. Apple may telephone the number on your D-U-N-S record to confirm your authority to enrol. Make sure someone answers it and knows the call is coming. Step 3: Pay and Wait The fee is 99 USD per year, or the local equivalent, and it renews automatically. Local taxes may apply on top. Individual enrollment often completes within 24 to 48 hours. Organization enrollment commonly takes one to two weeks and occasionally longer if verification stalls. If you are working to a launch date, start this before you start building. Waiting on Apple with a finished app is a bad place to be. Step 4: Add Your Team This is where organization membership earns its keep, and it is what the video refers to when it mentions sharing access. In App Store Connect, go to Users and Access and invite people by email. Each gets a role: Account Holder — one person, owns the membership and handles renewal. Admin — full access including user management and agreements. App Manager — manages apps and submits builds, no financial or legal access. Developer — uploads builds and manages certificates. Marketing — edits metadata and screenshots only. Finance — sees reports and payments only. Give an external developer or agency the App Manager or Developer role, not Admin. They can build and ship without touching your agreements, banking details, or user list. This is the same principle as scoped registrar access — the client owns the account, the agency gets what it needs. Individual accounts have no roles at all. One Apple ID, no delegation. If you plan to work with anyone else, that limitation arrives fast. Trader Status for the EU Since February 2025, anyone distributing apps in the European Union must declare trader status under the Digital Services Act and provide contact details that Apple displays publicly on the App Store listing. If you do not complete this, your apps are removed from EU storefronts. It applies to individual accounts too, and the required contact details become public. Complete it in App Store Connect under Business, then Trader Status, before you plan an EU release. Common Enrollment Problems Organization enrollment rejected, details do not match. Your D-U-N-S record differs from what you entered. Even formatting differences count. Look up your record, then copy it verbatim. Apple cannot verify your website. It must be live, on your company's own domain, and clearly associated with the legal entity name. A Linktree or a social profile will not do. Cannot enroll on the web as an individual. Expected in most regions now. Use the Apple Developer app on an iPhone or iPad. Two-factor authentication cannot be enabled. You are using a Managed Apple ID. Create a standard personal Apple ID instead. Enrolled but cannot submit an app. Outstanding agreements. Check Business, then Agreements, in App Store Connect. Paid apps additionally require complete banking and tax details. Membership expired and apps disappeared. The App Store removes apps when membership lapses. Renewal restores them, but the outage is real. Keep the payment method current. Where This Fits in a Real Project Enrollment is the administrative front end of shipping to iOS. Behind it sit certificates, provisioning profiles, TestFlight distribution, App Store review, and a release process that does not depend on one person's laptop. Our team ships production iOS apps for clients — several are live on the App Store, including restaurant ordering, events, and directory apps. We work inside the client's own developer account with a scoped role rather than holding the membership ourselves, so the client owns their listings. You can see how we work on our work process page and browse shipped apps in our portfolio . For the equivalent on the domain side, the GoDaddy delegate access guide covers granting scoped registrar access without sharing credentials. More walkthroughs are on the tutorials hub , and longer technical writing lives on the blog .

Posted 20.11.2025
How to Grant Delegate Access to Developers in GoDaddy
Craxinno Technologies

How to Grant Delegate Access to Developers in GoDaddy

Your developer needs to update DNS records. The obvious move is to send them your GoDaddy login. Do not. Sharing a password means they can see your billing, your other domains, and every product on the account — and if two-factor authentication is enabled, it will not work for them anyway. GoDaddy Delegate Access solves this properly. Your developer signs in with their own credentials and sees only what you allowed. You can revoke it in two clicks when the project ends. What Is GoDaddy Delegate Access? Delegate Access lets you invite another GoDaddy user to manage parts of your account without giving them your password. They log in as themselves. Their actions are attributable to them. Nothing about your credentials changes, and two-factor authentication on your account stays intact. Both parties need a GoDaddy account. Creating one is free — your developer does not need to buy anything. Which Permission Level Should You Choose? This is the decision that matters, and GoDaddy's labels understate the difference. There are three levels: Level What they can do Use when Products & Domains Manage existing domains, DNS records, hosting, and websites. Cannot buy anything. Almost always. This is the right default. Products, Domains & Purchase Everything above, plus buy products and renewals using your stored payment method . Only if you genuinely want them spending on your card. Products, Domains, Purchase & Account Everything above, plus change account settings. Rarely. Effectively a co-owner. Start with Products & Domains. It covers everything a developer normally needs: editing DNS, pointing a domain at a new host, connecting a subdomain, managing SSL. The second level exists for people who should be able to renew a domain without asking you. Granting it means someone else can charge your card. The third level should be reserved for a business partner or an in-house administrator, not a contractor. You can raise the level later if a specific task requires it. Going the other way — realising too late that a contractor could change account settings — is the harder conversation. How to Grant Delegate Access in GoDaddy Sign in to your GoDaddy account. Click your profile in the top right, then Account Settings, then Delegate Access. Under "People who can access my account," click Invite to Access. Enter your developer's name and the email address on their GoDaddy account. This matters — the invitation is tied to that address. If they have a GoDaddy account under a different email, the invite will not connect to it. Choose the access level. See the table above. Click Invite. GoDaddy emails them a link. What Your Developer Does Next They open the email and click the invitation link. If they already have a GoDaddy account, they sign in and accept. If not, they create one first — free, no purchase needed. To use the access afterwards, they sign in to their own GoDaddy account, click their profile, then Account Settings, then Delegate Access, and look under "Accounts I can access." Selecting your account switches them into it. This is the step people get stuck on. The delegate does not receive a special login — they use their own account and switch. If your developer says they cannot find your domain, this is almost always why. How to Revoke Delegate Access Go to Account Settings, then Delegate Access. Find the person under "People who can access my account," click the three dots beside their name, and choose Delete. Access ends immediately. Do this the day a project ends. Delegate access does not expire on its own. Agencies and contractors accumulate access to client accounts they finished with years ago, and nobody notices until there is a reason to look. What Delegate Access Does Not Cover Worth knowing before you assume it is handled. Email mailboxes. Microsoft 365 and Workspace Email accounts bought through GoDaddy are managed separately. A delegate can see the product but not read mail. Some account-level actions remain restricted below the highest permission level, including certain settings changes. Other registrars. If a domain sits with Namecheap or Cloudflare, this does nothing for it. Each registrar has its own mechanism. Your other accounts. Delegate access is per GoDaddy account. If you have several, invite them to each one. Common Problems The invitation never arrived. Check spam. Confirm the email address matches the one on their GoDaddy account exactly. Resend from the Delegate Access page. They accepted but cannot see the domain. They are looking at their own account rather than switching into yours. Point them to Account Settings, then Delegate Access, then "Accounts I can access." They can see the domain but cannot edit DNS. The permission level is too low, or the domain uses external nameservers — in which case DNS is managed wherever those nameservers point, not at GoDaddy. The invite link expired. Invitations time out. Send a new one. They cannot buy or renew. Expected on Products & Domains. Either handle the purchase yourself or raise the level deliberately. Better Practice for Agencies and Clients If you are the developer asking a client for this, ask for the lowest level that does the job, and say why. "Products & Domains is enough — I do not need purchase rights" builds more trust than accepting full access without comment. If you are the client, grant one delegate per person rather than one shared account for a team. Attribution is the whole point. And put an end date on it. When the engagement finishes, revoking access should be on the same checklist as the final invoice. Where This Fits in a Real Project Access management is a small piece of a handover that usually goes badly. The larger question is who owns the domain, the hosting, the repository, the analytics, and the DNS at the end of a project — and whether any of it depends on a contractor's personal account. Our team works inside client infrastructure regularly, and we ask for scoped access rather than credentials as a matter of course. You can see how we work on our work process page and browse shipped projects in our portfolio . If you are configuring DNS once access is granted, the SendGrid on GoDaddy guide covers the record setup, and the SSL certificate guide handles TLS on the server behind it. More walkthroughs are on the tutorials hub , and longer technical writing lives on the blog .

Posted 06.11.2025
How to Set Up Tailwind CSS v4 in React + Vite
Tailwind

How to Set Up Tailwind CSS v4 in React + Vite

Setting up Tailwind CSS in a React and Vite project takes three steps and about sixty seconds — install two packages, add one plugin to your Vite config, add one line to your CSS file. If you have followed an older tutorial and hit errors, that is because Tailwind CSS v4 changed the installation completely. There is no tailwind.config.js , no PostCSS config, and no @tailwind directives any more. The Short Answer To set up Tailwind CSS v4 in a React and Vite project: Install the packages: npm install tailwindcss @tailwindcss/vite Add the plugin to vite.config.js : 1 2 3 4 5 6 import { defineConfig } from 'vite' ; import react from '@vitejs/plugin-react' ; import tailwindcss from '@tailwindcss/vite' ; export default defineConfig ( { plugins : [ react ( ) , tailwindcss ( ) ] , } ) ; Replace the contents of src/index.css with a single line: 1 @ import "tailwindcss" ; Run npm run dev . Tailwind is working. The rest of this guide explains what changed, why older instructions fail, and how to configure it. What Changed in Tailwind CSS v4 Tailwind CSS v4 was released in January 2025. It replaced the JavaScript configuration model with a CSS-first one. Tailwind v3 Tailwind v4 Install command npm install -D tailwindcss postcss autoprefixer npm install tailwindcss @tailwindcss/vite Init step npx tailwindcss init -p None Config file tailwind.config.js None — configure in CSS with @theme PostCSS config postcss.config.js required Not required with the Vite plugin CSS entry @tailwind base; @tailwind components; @tailwind utilities; @import "tailwindcss"; Content paths Declared manually in config Detected automatically Four things that used to be mandatory no longer exist. That is why v3 instructions produce errors rather than a working setup. Why Is npx tailwindcss init -p Not Working? Because the command was removed in Tailwind v4. There is no init step and no config file to generate. If you run it, you will get an error saying the command does not exist. Nothing is broken — you simply do not need it. The same applies to tailwind.config.js . Creating one has no effect in v4 unless you explicitly load it, which is only needed when migrating a large v3 project. Why Are My Tailwind Classes Not Working? Four common causes, in rough order of likelihood. You used v3 directives. If src/index.css contains @tailwind base; and the other two directives, replace all three with @import "tailwindcss"; . You did not import the CSS file. Check that src/main.jsx contains import './index.css' . Vite does not load it automatically. You added the PostCSS plugin instead of the Vite plugin. With Vite, use @tailwindcss/vite in vite.config.js . The @tailwindcss/postcss package is for build tools that are not Vite. You did not restart the dev server. Changes to vite.config.js require a restart. Hot reload does not pick them up. How Do I Configure Colors and Fonts in Tailwind v4? Configuration moved into your CSS file, using the @theme block. 1 2 3 4 5 6 7 8 @ import "tailwindcss" ; @theme { -- color - charcoal : #0a0a0b ; -- color - cream : #f4f1ea ; -- color - amber : # FBA927 ; -- font - display : "Space Grotesk" , sans - serif ; -- font - mono : "JetBrains Mono" , monospace ; } Those definitions generate utility classes automatically. --color-amber produces bg-amber , text-amber , border-amber , and every other colour utility. The naming prefix determines the utility family. --color-* generates colour utilities, --font-* generates font-family utilities, --spacing-* generates spacing, --breakpoint-* generates responsive breakpoints. Because these are real CSS custom properties, you can also read them anywhere in your stylesheet with var(--color-amber) , and inspect them in browser devtools. That was not possible with the JavaScript config. Do I Still Need content Paths in Tailwind v4? No. Tailwind v4 detects your source files automatically. It scans your project, respects your .gitignore , and skips binary files. There is no content array to maintain and no more classes silently missing because a folder was not listed. If you need to add a source outside the default detection — a component library in a separate package, for example — use the @source directive: 1 @source "../node_modules/@your-org/ui" ; Which Browsers Does Tailwind CSS v4 Support? Tailwind v4 requires Safari 16.4, Chrome 111, and Firefox 128 or later. All three were released in 2023 or earlier. This is stricter than v3 because v4 is built on modern CSS features — cascade layers, @property , and color-mix() among them. If you must support older browsers, stay on Tailwind v3.4. There is no v4 configuration that lowers the requirement. Adding an Editor Plugin Install the Tailwind CSS IntelliSense extension in VS Code. It gives you class autocomplete, hover previews of the underlying CSS, and warnings on conflicting classes. With v4 it reads your @theme block directly, so custom colours appear in autocomplete with the right swatches. Also add the Prettier plugin for class sorting: npm install -D prettier prettier-plugin-tailwindcss It orders utility classes consistently, which keeps diffs readable when several people work on the same components. Migrating an Existing Project from v3 to v4 Tailwind provides an automated upgrade tool: npx @tailwindcss/upgrade It requires Node.js 20 or higher. It converts your config to @theme , updates the CSS directives, and renames utilities that changed. Run it on a clean branch and review the diff. A few things it cannot fully handle: Renamed utilities — shadow-sm became shadow-xs , and the old shadow is now shadow-sm . Similar shifts affect rounded and blur . Removed opacity shorthands — bg-black/50 still works, but the older bg-opacity-50 pattern does not. Any custom plugin written against the v3 JavaScript API will need rewriting. For a small project, a manual migration is often faster than reviewing the tool's output. Where This Fits in a Real Project Tailwind handles styling. What determines whether a codebase stays maintainable is the layer above it — a component library with consistent variants, design tokens that match what your designers use in Figma, and a review habit that stops one-off utility strings accumulating in JSX. Our team builds and ships production React and Next.js interfaces for client software, including design system work and Figma-to-code delivery. You can see the stack we work across on our technologies page and browse shipped work in our projects portfolio. If you are still setting up, the React with TypeScript tutorial covers project creation with Vite. For deployment, the React on Netlify guide handles hosting, and the NVM on Windows tutorial covers Node version management. More walkthroughs are on the tutorials hub , and longer technical writing lives on the blog .

Posted 28.11.2025
Connect With Us

Have something in mind?

We take on a handful of new custom-software engagements every quarter. If your problem is interesting and your timeline is real — let’s talk.

Let’s ConnectAvg. response · under 4 hours
01
Ideate · 1 weekWorkshops, scoping, success metrics agreed.
02
Design + Build · 8–14 weeksBi-weekly demos. Production code from week one.
03
Ship + Support · ongoingDeployment, observability, and a long-tail retainer.