Full Stack Application

Template MDX File with examples

Platform for students to learn critical thinking through real-world projects.

GitHub IconGitHub

A full-stack application that empowers high school students to learn, execute and retain critical thinking skills. It’s a platform for students to get experience through real-world projects to gain a greater understanding of their skills, talents, interests, and personality traits.

This project is currently in development. Visit our repo on GitHub to follow for updates!

Project Highlights

  • Iterated on code base quickly, refactoring code dynamically on front-end and back-end in tandem due to project direction changes, layout updates, and feature changes, and developed complex Dynamic Reference Mongoose.js schemas to allow simple user sign up regardless of user type.
  • Leveraged my previous knowledge to quickly develop an MVP, which then was iterated on to achieve the desired outcome. A user-focused approach was used to design the essential features of the app.
  • Developed features efficiently by first writing vertically sliced user stories, then designing the UI, component framework, front-end state management logic, and creating server-side endpoints to support the required functionality.
  • Architected the application to be asynchronous, utilizing a proxy and handling incoming data as a microservice to maintain strict separation of concerns.
  • Integrated the OpenAI generative AI API to process user input, helping them brainstorm and flesh out their ideas. Employed AI to generate unique profile images based on user profiles, adding an element of fun for students.
  • Wrote and completed vertically sliced user stories by quickly building required backend functions and automated tests, then designing front-end React routes and components and connecting them to the server endpoints.

Tech Stack

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-accent')({
      colors: ['violet', 'blue'],
      root: 'blue',
      cssVarsPrefix: 'tw-plugin', // result: --tw-plugin-accent-200
    }),
    // ...
  ],
};
Selected: 6-10
JavaScript
UTF-8

Plugin Options

OptionDescription
colors (REQUIRED)Include specific color(s). View the available colors section.
rootSet color from colors option as :root accent color.
cssVarsPrefixSet prefix for css variables name. default to 'tw-ta' (e.g: --tw-ta-accent-200)
Note

The cssVarsPrefix option can help prevent naming conflicts and make it easier for you to use accent CSS variables in your styles.

Available Colors

Check the default color palettes for the Tailwind CSS v2 and the Tailwind CSS v3.

Basic Usage

Add the data-accent attribute to your root/html element (or simply set the root plugin option).

<html data-accent="blue">
  <!-- ... -->
</html>

Now, instead of writing text-blue-600, with this plugin you can write text-accent-600.

The accent color will follow the value of the nearest parent element's data-accent attribute, or the element itself.

Let the code speak:

<!-- default to :root -->
<p class="text-accent-600">this text has a blue (:root) accent color.</p>

<div data-accent="violet">
  <!-- based on nearest parent element: violet. -->
  <p class="text-accent-600">this text has a violet accent color.</p>

  <!-- based on nearest parent element: violet. -->
  <p class="text-accent-600">
    this text has a violet

    <!-- overrides the parent's accent color to blue. -->
    <span data-accent="blue" class="text-accent-600">and blue</span>

    accent color!
  </p>
</div>

Try it out on Tailwind Play

Examples

Real-world Example

This website uses this plugin. By default, all pages use the violet accent color, except for pages under the work/ path, which have a blue accent color.

You can see the difference in the table of contents, header caption, text selection, links, etc.

See the configuration file and implementation code for details.

Live Example

Want to see something cool? Click this button and watch the accent color on this page change.

✦ Want a different color? ✦

You should already know that the button doesn't change the color classes of all components. This single line of code—

document.documentElement.setAttribute('data-accent', newAccent);

—does the magic by simply changing the html data-accent attribute value to the new accent color, and components that use the -accent-* color will follow the changes.

Changing your website's accent color has never been this easy 🔥

License

tailwindcss-accent is licensed under the MIT License.

0
0
0
0