How to use Tailwind CSS theming on Shipixen

intermediate 8 min read Updated 2026-03-18

Quick Answer

Shipixen provides built-in Tailwind CSS theming through its theme configuration panel and CSS variables. You can customize colors, typography, and components using the visual theme editor or by modifying the tailwind.config.js file directly.

Get ShipixenPartner

Try Shipixen Full Shipixen Review

Prerequisites

Basic knowledge of Tailwind CSS
Shipixen account and project
Understanding of CSS custom properties
Familiarity with component styling

Step-by-Step Instructions

Access the Theme Configuration

Navigate to your Shipixen dashboard and select your project. Click on the Theme tab in the left sidebar, then select Tailwind Configuration. This opens the visual theme editor where you can customize your Tailwind CSS variables.

The theme editor provides real-time preview of changes across your entire site.

Configure Color Palette

In the theme editor, click on Colors section. Modify primary, secondary, and accent colors using the color picker or by entering hex values. Shipixen automatically generates all color variations (50, 100, 200, etc.) based on your base colors. Click Apply Changes to update your site's color scheme.

Use the contrast checker to ensure your color combinations meet accessibility standards.

Customize Typography Settings

Navigate to the Typography section within the theme editor. Configure font families by selecting from Google Fonts integration or uploading custom fonts. Adjust font sizes, line heights, and letter spacing for headings and body text. Set up your font scale using the Type Scale controls.

Shipixen automatically loads font optimization and provides font-display: swap for better performance.

Edit Component Themes

Click on Components in the theme editor to access component-specific styling. Customize buttons, cards, forms, and navigation elements using the visual controls. Each component shows a live preview with your current theme applied. Modify border radius, shadows, and spacing using the provided sliders and inputs.

Component changes automatically update all instances across your site using CSS custom properties.

Configure Dark Mode

Enable dark mode by toggling the Dark Mode switch in the theme editor. Customize dark mode colors separately from light mode using the Dark Palette section. Shipixen automatically handles the dark mode implementation using Tailwind's dark variant and CSS custom properties.

Test your dark mode colors on different screen types to ensure good contrast and readability.

Add Custom CSS Variables

For advanced customization, navigate to Advanced Settings and click Custom Variables. Add your own CSS custom properties using the format --variable-name: value. These variables can be referenced in your Tailwind classes and component styles throughout your Shipixen project.

Use semantic naming for custom variables like --brand-accent or --content-background for better maintainability.

Export and Deploy Theme

Once satisfied with your theme, click Export Theme to download the generated tailwind.config.js and CSS files. Alternatively, click Deploy Changes to automatically apply the theme to your live site. Shipixen will regenerate all stylesheets and update your production deployment.

Always preview your theme changes on different devices before deploying to production.

Common Issues & Troubleshooting

Theme changes not appearing on the live site

Clear your browser cache and ensure you clicked Deploy Changes after making modifications. Check the deployment status in the Deployments tab to confirm the build completed successfully.

Custom colors not showing correct contrast ratios

Use Shipixen's built-in contrast checker in the color picker. Ensure your color combinations meet WCAG AA standards by maintaining a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Dark mode colors appearing incorrect

Verify that dark mode colors are configured separately from light mode in the Dark Palette section. Check that components using custom CSS classes include proper dark: variants in their styling.

Fonts not loading properly after theme changes

Ensure Google Fonts are properly selected in the typography settings. If using custom fonts, verify they're uploaded correctly and check the network tab for any 404 errors when loading font files.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Shipixen website before purchasing.

Visit Shipixen View Shipixen Pricing