Tagging Your Solutions
Technology tags help categorize your solution and make it discoverable by other developers. Choosing the right tags is simple but important. This guide explains how to tag effectively.
Table of contents
What Tags Are For
Tags highlight the additional tools, methodologies, and focus areas you used in your solution beyond the core languages. There aren't HTML, CSS, or JavaScript tags, as they're implied by the challenge languages. Instead, tags focus on what makes your approach distinctive and what others might learn from.
Available Tags
Frontend Mentor offers tags covering common frontend tools and approaches:
CSS Tools & Frameworks
- Sass/SCSS - CSS preprocessor
- Tailwind CSS - Utility-first CSS framework
- CSS Modules - Locally scoped CSS
- Styled Components - CSS-in-JS for React
- Bootstrap - CSS framework
JavaScript Frameworks
- React - Component-based UI library
- Vue - Progressive JavaScript framework
- Angular - Full-featured framework
- Svelte - Compiler-based framework
- Next.js - React framework
- Nuxt.js - Vue framework
Other Tools & Focus Areas
- TypeScript - Typed JavaScript
- Accessibility - Focus on accessible implementation
The available tags may expand over time as new technologies gain popularity.
How to Choose Appropriate Tags
The key principle is simple: only tag tools and approaches you actually used in your solution.
Be Honest
If your solution uses vanilla CSS, you don't need any CSS-related tags. If you used Tailwind, tag Tailwind. Only tag what you genuinely used.
Be Specific
If you used Sass, tag Sass. If you used Tailwind, tag Tailwind. Specific tags help people find solutions that match their interests.
Ask Yourself
- Would someone searching for this tag find relevant code in my repo?
- Is this tool or approach a significant part of my solution?
If the answer is no, don't add the tag.
Why Tags Matter
Discoverability
Tags are the primary way developers filter and find solutions. Someone learning React wants to see React solutions. Someone exploring Tailwind wants Tailwind implementations.
Your Talent Profile
When you set up your Talent Profile, you can feature solutions to showcase your skills. The tags on your featured solutions become listed skills on your profile. For example, if you feature projects tagged with React and TypeScript, those appear as skills that recruiters can see.
This makes accurate tagging valuable for your career—the tags you use today can demonstrate your capabilities to potential employers tomorrow.
Community Value
The solutions archive is a learning resource. Accurate tags make it more useful for everyone. When tags are accurate, developers can trust the filtering system to show them relevant solutions.
Don't Over-Tag
Over-tagging is adding tools that are only tangentially present in your solution.
Example: You used Create React App, which includes Webpack under the hood.
- Wrong: Tag with Webpack
- Right: Only tag React (unless you meaningfully customized Webpack)
Example: Your package.json has many dev dependencies.
- Wrong: Tag every technology in your dependencies
- Right: Only tag tools you actively used in your code
Don't Under-Tag
Under-tagging is failing to tag tools that are meaningfully present.
Example: You used Tailwind CSS for all styling.
- Wrong: No CSS-related tags
- Right: Tag Tailwind CSS
Example: You wrote the project in TypeScript.
- Wrong: No tags
- Right: Tag TypeScript
Updating Tags Later
You can edit your solution to update tags anytime:
- If you forgot to tag something, add it
- If you tagged something inaccurately, remove it
- If you refactored to use different tools, update accordingly
Summary
Effective tagging is simple:
- Tag additional tools and approaches you used (not HTML/CSS/JS)
- Be specific and honest
- Remember that tags can become skills on your Talent Profile
Your tags help build a useful, searchable archive that benefits the entire Frontend Mentor community.