Creating a Neon Theme Using Tailwind CSS

Themes are an easy way to add memorable elements to an application. Themes can range from sleek and modern to bold and gaudy. In this article, I'll show you how to make a neon theme with glow animations.

To start, let's use an empty tailwind.config.js file template:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Add the paths to your HTML, JavaScript, JSX, TSX, or other template files
    // Example: './src/**/*.{html,js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {
      // Customize your theme here (colors, fonts, spacing, etc.)
      // Example: colors: { primary: '#ff6347' }
    },
  },
  plugins: [
    // Add any Tailwind plugins here (like forms, typography, etc.)
  ],
}

Under content, add the paths to the files tailwind will be styling. The project using this theme and animation was built using React and React Router.

content: [
    "./index.html",
    "./src/pages/**/*.{js,jsx}",
    "./src/components/**/*.{js,jsx}"
  ],

Under theme, we want to define all of the elements of our styling theme. By adding extend:{} we can extend the default theme and add our own custom values. Let's start with colors. We want a dark background and bright, neon colors. I chose these specific hex codes, but you can use any hex codes that you like.

 theme: {
    extend: {
      colors: {
        backgroundDark: '#121212', // Dark grey
        darkBlue: "#1A2A4B", // Dark blue 
        neonPurple: '#9B59B6', // Neon purple 
        neonPink: '#FF00FF',    // Neon pink
        neonCyan: '#00FFFF',    // Neon cyan
        neonBlue: '#3498DB',    // Bright blue
        neonGreen: '#2ECC71',   // Bright green
        neonYellow: '#FFEB3B',  // Neon yellow
      }
    }
  }

Next, I wanted a fun, blocky font. I chose Bungee with sans-serif as the default in case the browser can't read Bungee.

fontFamily: {
        sans: ['Bungee', 'Helvetica', 'Arial', 'sans-serif'], // You can add more fonts or use your custom ones
      },

Now we have a generally nice and usable theme. However, we can take our theme one step further by adding animations. Neon signs are known for that special glow they emit, and we can recreate that as an animation. This animation will look like a glowing effect that transitions between two colors.

To create an animation, we use keyframes. Let's call this animation neonGlow. Within neonGlow, we need to define what is happening at 0%, 50%, and 100%. You can think of this as what the animation looks like in a snapshot of the begining, middle, and end. You can change the percentages to get different effects, but we'll stick to 0%, 50%, and 100%. At each snapshot, we want a textShadow that layers shadows at different intensities around text. The syntax for textShadow is:

text-shadow: horizontal-offset vertical-offset blur-radius color;

By setting horizontal and vertical offsets to 0, the shadow will appear around all of the text rather than to one side like a real-life shadow.
For this animation, the color will start as neon pink and transition to neon cyan. Each shadow inside a textShadow will receive an increasing blur-radius size. Here is what the entire neonGlow should look like:

neonGlow: {
          '0%': {
            textShadow: '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF, 0 0 20px #FF00FF',
          },
          '50%': {
            textShadow: '0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF, 0 0 40px #00FFFF',
          },
          '100%': {
            textShadow: '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF, 0 0 20px #FF00FF',
          },
        }

Now we need to define that neonGlow as a custom animation and what those animation properties are.

animation: {
  neonGlow: 'neonGlow 1.5s ease-in-out infinite alternate',
}

This defines neonGlow as the animation name. It has a duration of 1.5 seconds to cycle all the way through the colors. ease-in-out is the timing function that means the animation will start slowly, speed up in the middle, then slow down at the end. This creates a very smooth transition. infinite is the iteration count that tells us to continuously loop the animation. alternate defines the direction of the animation. After the first cycle of the animation, it will reverse the direction for the second cycle, then reverse again for the next, and so on. This adds a smooth, pulsing effect.

That's it for animation. The last thing we'll add is boxShadow. Our custom shadow will be named neon. Neon will have two layered shadows. Just like then animation, we will set both of our shadow's horizontal and vertical offsets to 0 to create a shadow around the entire element. For the first, larger shadow, we'll define the blur radius as 30px to create a wider, diffused. This shadow will be defined as blue. The second shadow will be pink and be smaller at 15px. The final boxShadow will look like this:

boxShadow: {
        neon: '0 0 15px rgba(255, 0, 255, 0.7), 0 0 30px rgba(0, 255, 255, 0.7)', // Neon shadow effect
      }

Now our theme is complete, and we can use our custom colors, animations, and shadow to style our elements!