Solved: Tailwind properties missing in production

Utkarsh Tiwari — Sun, 03 Mar 2024 03:18:27 +0000

So, one fine (Monday) morning, I was fully committed to optimise my portfolio website - https://utkarsh-tiwari-portfolio-react.netlify.app/. Built using React and Tailwind CSS, everything was coming out great.

When I deployed it on gh-pages, something broke! The background colour behind the images in the skills section was just transparent!
But I had properly given different colours like bg-teal-100, bg-amber-300, bg-green-100, bg-emerald-800, bg-yellow-800, etc.

I checked the localhost 10 times, it worked on my machine!

The problem exactly -

Localhost:

The not-so Localhost a.k.a gh-pages:

The culprit =

Turns out that while I was trying to be too smart for my own good and over-optimising the code, I dynamically injected the bg-colors from the skills.js file.

Snapshot of skillsData.js file -

export const skillsData = [
  {
    id: 1,
    img: "/images/html-css-logo.png",
    alt: "html-css-logo",
    name: "HTML & CSS",
    level: "Proficient",
    bgColor: "teal-800",
  },
]

Snapshot of skills.jsx file -

<li className="col-span-1 flex shadow-sm rounded-md" key={skill.id}>
    <div className={`bg-${skill.bgColor} text-sm font-medium justify-center w-16`}>
...
...
...
    </div>
</li>

Do you see the bgColor property? That's being dynamically inserted!

And when we build for production, Tailwind purges all the unused css to reduce the overhead and only adds the classes which are actually being used.

So, the dynamic values (which are basically completing the property names) are not exactly "in-use" when purge css runs. Hence they are removed.

(If you did not understand what I meant - "The exact property name is bg-teal-500, but since the code is split into two parts, it looks like the value is just bg-")

Pro - File size is reduced and overall it will be faster.
Con - Dynamically injected values are not compiled and hence are lost in production.
Result - Transparent background 🥲

PS: I've a new site on utk09.com

How to resolve vulnerabilities in Front-End Applications

Utkarsh Tiwari — Sun, 03 Mar 2024 02:31:16 +0000

If you're working with front-end frameworks like React.js, Angular, or Vue.js, or if your project relies on a package.json file, you might encounter vulnerabilities when running npm audit or yarn audit. These vulnerabilities pose a security risk and need to be addressed promptly. This article will guide you through resolving vulnerabilities, particularly in React.js-based projects.

Understanding Vulnerabilities

Vulnerabilities refer to flaws or weaknesses in a software system that attackers can exploit to undermine the system's integrity, availability, or confidentiality. These can emerge from outdated packages, insecure configurations, or flawed code.

Resolving Vulnerabilities in Direct Dependencies

Direct dependencies (or devDependencies) are the packages that your project directly relies on. Here’s how you can address vulnerabilities in your React.js, Angular, or Vue.js applications:

Identify Vulnerabilities: Execute npm audit or yarn audit to uncover any vulnerabilities within your project.
Assess Breaking Changes: Before updating any packages, verify whether there are breaking changes in the newer versions. Review the release notes of the packages or use npm outdated or yarn outdated to identify any significant changes that could impact your application.
Update Packages: After evaluating for breaking changes, rectify the vulnerabilities by executing npm audit fix or yarn audit fix. This will typically upgrade the packages to the latest versions, thereby resolving the security issues. If you want to update a specific package, you can use npm install package-name@latest or yarn add package-name@latest. Note: Avoid using npm audit fix --force or yarn audit fix --force as it can sometimes lead to downgrading packages, which might introduce new vulnerabilities. In such cases, it's better to manually update the packages by specifying the version in the package.json file.
Automate Security Checks: Incorporate vulnerability checks into your CI/CD pipeline by using npm audit or yarn audit and configure the pipeline to fail if vulnerabilities are detected. Additionally, tools like npm audit fix or yarn audit fix can be employed to automatically correct vulnerabilities, streamlining the maintenance of your project's security.

Resolving Vulnerabilities in Indirect Dependencies

Vulnerabilities can also occur in indirect (or transitive) dependencies, which are packages that your direct dependencies require. These vulnerabilities need careful handling to avoid breaking your project. Here’s how to deal with vulnerabilities in indirect dependencies effectively:

Identify Indirect Vulnerabilities: Run npm audit or yarn audit. These commands help in identifying both direct and indirect dependency vulnerabilities.
Analyze the Dependency Tree: Use npm ls <package_name> or yarn list --pattern <package_name> to understand the dependency chain. This helps in pinpointing which direct dependencies are causing the indirect vulnerabilities.
Update Direct Dependencies: Often, updating your project's direct dependencies can also update the indirect ones, resolving vulnerabilities. Follow the general update procedures as outlined in previous sections.
Manual Updates for Indirect Dependencies: If direct updates don't resolve the issues, you can manually update indirect dependencies in Node.js v16.14.2 or later and npm v8.3.0 or later. Add overrides field in your package.json:

   {
     "overrides": {
       "semver": "6.3.1"
     }
   }

After specifying the override, run npm install or yarn install. This modification forces all uses of the semver package to the specified version, potentially resolving the vulnerabilities. However, ensure compatibility as this may lead to issues if the updated version is incompatible with other dependencies.

Specifying Overrides for Specific Packages: If you need to target a specific package for the update, you might add a more targeted override in your package.json:

   {
     "overrides": {
       "@vitejs/plugin-react": {
         "semver": "6.3.1"
       }
     }
   }

This ensures that only @vitejs/plugin-react uses the specified version of semver. Implement this, then run npm install or yarn install to apply the changes.

CI/CD Integration: Even if your CI/CD pipeline operates under Node.js version 14, you can address vulnerabilities in indirect dependencies by leveraging the overrides feature. First, ensure that you have Node.js version ^16.14.0 locally. Then, add the necessary overrides to your package.json and run npm install. This process should generate an updated package-lock.json file reflecting the changes. In your CI/CD pipeline, utilize the package-lock.json file from your local development environment to install dependencies. Execute the following command:

npm ci

This specific command ensures that your project installs dependencies exactly as defined in your package-lock.json, applying the overrides as intended and maintaining consistency across environments.

It's crucial to thoroughly test your application after making these changes to ensure everything works correctly and the vulnerabilities are resolved.

Best Practices for Security Maintenance

Enhance the security of your front-end applications with these straightforward practices:

Update Packages Regularly: Always use the latest versions of your packages to benefit from recent security updates. Consistent updates prevent compatibility issues and reduce security risks.
Automate Security: Implement automated security scans within your CI/CD pipeline. Early detection of vulnerabilities helps in their quick resolution, keeping your production environment secure.
Utilize Security Tools: Employ tools like npm audit or yarn audit to find and address vulnerabilities. Tools such as SNYK or npm audit fix can help automate the fixing process.
Specify Exact Versions: When adding packages, use the --save-exact flag with npm install or yarn add to lock the versions. This prevents unintended updates and maintains consistency, reducing the likelihood of introducing vulnerabilities.

Conclusion

Vulnerabilities in front-end applications represent considerable security threats. However, by adhering to the guidelines provided in this article, you can effectively mitigate these risks in your React.js, Angular, or Vue.js projects. Regular updates to your packages and the integration of automated security checks into your CI/CD processes are crucial steps in preserving the security and integrity of your applications. Stay proactive in your security practices to ensure a safer web environment for all users.

Personal website:utk09.com | I write tutorials and blogs :)

DEV Community: Utkarsh Tiwari