Tutorial
Aug 13, 202637 views

How to Set Up an SSL Certificate in Nginx (Step-by-Step Guide)

A complete guide to setting up an SSL certificate in Nginx — Certbot with Let's Encrypt, manual installation of a purchased certificate, the full server block config, verification, and fixes for the errors that come up most.

NginxSSLTLSLet's EncryptCertbot
VS
Vikash SinghUpdated Dec 2, 2025
Likes0
Shares0
37 views · 37 YouTube viewsAug 13, 2026

TL;DR

For most sites, run sudo certbot --nginx -d yourdomain.com and verify renewal with a dry run. For a purchased certificate, generate a CSR with openssl, concatenate your certificate with the intermediates in the right order, point ssl_certificate at the chained file, then run nginx -t before reloading.

Walkthrough

Step-by-step.

Serving a site over plain HTTP in 2026 means browsers flag it as insecure before anyone reads a word of it. Setting up SSL on Nginx takes about fifteen minutes.

There are two paths. Certbot with Let's Encrypt is free, automated, and renews itself — this is the right choice for almost everyone. A purchased commercial certificate involves manual file handling and is only necessary in specific cases. This guide covers both.

Before You Start

You need a domain with an A record pointing at your server's public IP. DNS must have propagated. Certificate issuance verifies domain ownership, and it will fail if DNS is not resolving yet.

Ports 80 and 443 must be open in your firewall and any cloud security group. Port 80 is required for the initial validation even though your site will end up on 443.

You need root or sudo access, and Nginx already installed and running.

Which Certificate Do You Actually Need?

Let's Encrypt is free, issues in seconds, and auto-renews every 90 days. It provides domain validation, which is exactly the same encryption strength as any paid certificate. For the vast majority of sites, this is the correct answer.

A commercial certificate is worth paying for in three situations. You need Organisation Validation or Extended Validation, where the certificate authority verifies your legal entity. You need a warranty and paid support for compliance reasons. Or you need a multi-year wildcard managed outside your server.

Encryption is identical across all of them. What you pay for is the validation process and the paperwork, not stronger security.

Path A: Let's Encrypt with Certbot

Step 1: Install Certbot

On Ubuntu or Debian, the snap package is what Let's Encrypt recommends:

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

The apt package exists but tends to lag behind.

Step 2: Run Certbot

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Certbot verifies domain ownership, obtains the certificate, edits your Nginx config to use it, and sets up the HTTP-to-HTTPS redirect. All of it.

When prompted about redirecting HTTP traffic, choose redirect.

Step 3: Confirm Auto-Renewal

sudo certbot renew --dry-run

Certificates last 90 days. The installer adds a systemd timer that renews at around 60 days. The dry run confirms it works. If you skip this check and renewal is broken, you find out when the certificate expires.

Verify the timer is active:

sudo systemctl list-timers | grep certbot

That is the whole process for most sites. Everything below is for people using a purchased certificate.

Path B: Installing a Purchased Certificate

Step 1: Generate a CSR and Private Key

On your server:

sudo mkdir -p /etc/nginx/ssl
cd /etc/nginx/ssl
sudo openssl req -new -newkey rsa:2048 -nodes -keyout yourdomain.key -out yourdomain.csr

Fill in the prompts. Common Name must be your exact domain. For a wildcard, use *.yourdomain.com.

The private key never leaves your server. Any vendor asking you to upload it is doing something wrong.

Step 2: Submit the CSR and Collect Your Files

Paste the contents of the .csr file into your certificate authority's order form. Complete their validation.

You will receive back your domain certificate and one or more intermediate certificates, sometimes called a CA bundle.

Step 3: Build the Certificate Chain

Nginx needs the domain certificate and the intermediates in a single file, in the correct order. Your certificate first, then the intermediates:

sudo cat yourdomain.crt intermediate.crt root.crt > yourdomain-chained.crt

Order matters. Reversed, browsers will report an incomplete chain — and desktop Chrome often hides the problem while mobile browsers and API clients fail hard. This is the single most common mistake with manual installs.

Step 4: Set Permissions

sudo chmod 600 /etc/nginx/ssl/yourdomain.key
sudo chown root:root /etc/nginx/ssl/yourdomain.key

A world-readable private key means anyone with shell access can impersonate your site.

Configuring the Nginx Server Block

Open your site config, typically at /etc/nginx/sites-available/yourdomain.com:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
server {
listen 443 ssl;
http2 on;
server_name yourdomain.com www.yourdomain.com;
ssl_certificate /etc/nginx/ssl/yourdomain-chained.crt;
ssl_certificate_key /etc/nginx/ssl/yourdomain.key;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers off;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 1d;
ssl_session_tickets off;
add_header Strict-Transport-Security "max-age=63072000" always;
root /var/www/yourdomain;
index index.html;
}
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
return 301 https://$host$request_uri;
}

A few notes on that config.

The listen 443 ssl http2 one-liner is deprecated in Nginx 1.25 and later. Use the separate http2 on; directive shown above. Plenty of older tutorials still show the old form and it now produces a warning.

TLS 1.0 and 1.1 are omitted deliberately. Both are deprecated and will fail a PCI compliance scan.

ssl_prefer_server_ciphers off is correct for modern setups. TLS 1.3 clients pick sensibly on their own.

Start HSTS with a short max-age while testing. Once a browser has seen the header, it refuses plain HTTP for that duration and there is no way to undo it from the server side. Only add includeSubDomains and preload once you are certain every subdomain serves HTTPS.

Testing and Reloading

Always test before reloading:

sudo nginx -t

If it reports the syntax is ok and the test is successful:

sudo systemctl reload nginx

Use reload rather than restart. Reload applies the new config without dropping active connections.

Verifying the Installation

Check the chain from the command line:

openssl s_client -connect yourdomain.com:443 -servername yourdomain.com

Look for "Verify return code: 0 (ok)" at the end of the output. Anything else means a chain problem.

Then run your domain through SSL Labs' server test. Aim for an A. If you score lower, the report tells you which directive is responsible.

Check your site in a browser too, on mobile as well as desktop. Mobile browsers are stricter about incomplete chains and will surface problems desktop Chrome quietly tolerates.

Common Nginx SSL Errors

SSL_ERROR_RX_RECORD_TOO_LONG — you are serving plain HTTP on port 443. The ssl parameter is missing from your listen directive.

ERR_CERT_AUTHORITY_INVALID — the intermediate certificates are missing or in the wrong order. Rebuild the chained file.

nginx: [emerg] cannot load certificate ... PEM_read_bio_X509 — the file path is wrong, or the file has Windows line endings from being edited on a desktop. Run dos2unix on it.

ERR_SSL_KEY_MISMATCH — the certificate does not match the private key. Compare the modulus hashes of both files with openssl x509 -noout -modulus and openssl rsa -noout -modulus. They must match.

Certbot fails with "Timeout during connect" — port 80 is blocked. Check both your server firewall and your cloud provider's security group.

Padlock shows but some resources are blocked — mixed content. Something on the page is still loading over HTTP. Check the browser console.

Keeping It Working

Set a calendar reminder before expiry even with auto-renewal enabled. Renewals fail silently when firewall rules change or a config edit breaks the challenge path.

Monitor the certificate externally. Uptime tools with certificate expiry checks catch what your server will not tell you.

Redirect HTTP to HTTPS at the server level rather than in application code. It is faster and it cannot be bypassed by a routing bug.

If you sit behind Cloudflare or a load balancer, know which layer terminates TLS. Origin certificate misconfigurations behind a proxy are a common and confusing failure mode.

Where This Fits in a Real Project

TLS is one layer. Security headers, rate limiting, and keeping the server patched matter alongside it.

Our team configures and maintains production infrastructure for client software, from Nginx and TLS through to CI and observability. You can see the stack we work across on our technologies page and browse shipped work in our projects portfolio.

If you are setting up the rest of the environment, the NVM on Windows tutorial covers Node version management, and the S3 backup guide handles data protection on AWS.

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

Answers

Frequently asked.

Is Let's Encrypt as secure as a paid SSL certificate?+

The encryption is identical. Let's Encrypt provides domain validation, the same as most paid certificates. Paid certificates differ in the validation process, warranty, and support — not in cryptographic strength.

Why does my Nginx SSL certificate work in Chrome but fail on mobile?+

Almost always an incomplete certificate chain. Desktop Chrome can sometimes fetch missing intermediates on its own; mobile browsers cannot. Concatenate your domain certificate with the intermediates, in that order, into one file.

How do I fix "SSL_ERROR_RX_RECORD_TOO_LONG" in Nginx?+

Your server block is listening on 443 without the ssl parameter, so it is serving plain HTTP on the HTTPS port. Change the directive to listen 443 ssl;, test with nginx -t, then reload.

How often do I need to renew a Let's Encrypt certificate?+

Every 90 days. Certbot installs a systemd timer that renews automatically at around 60 days. Confirm it works with sudo certbot renew --dry-run — a broken renewal is silent until the certificate expires.

What order do the certificate files go in for Nginx?+

Your domain certificate first, then intermediates, then the root if provided. Reversed order produces an incomplete chain that some clients accept and others reject.

Should I use restart or reload after changing Nginx SSL config?+

Reload. It applies the new configuration without dropping active connections. Always run nginx -t first — reloading a broken config can leave the server down.

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.