Skip to content

Merge Tailwind CSS classes without style conflicts in Go

License

Notifications You must be signed in to change notification settings

Oudwins/tailwind-merge-go

Repository files navigation

tailwind-merge-go - Tailwind Merge For Golang

Go Reference License: MIT Go Report Card Coverage Status

Utility function to efficiently merge Tailwind CSS classes in Golang without style conflicts. This library aims to be as close as possible to a 1:1 copy of the original dcastil/tailwind-merge library written in javascript.

import (
	"fmt"

	twmerge "github.com/Oudwins/tailwind-merge-go"
)

func main() {

	// example usage
	c := twmerge.Merge("px-4 px-10 p-1")
	fmt.Println(c) // "p-1"
}
  • Supports Tailwind v3.0 up to v3.4
  • Support for extending the default configuration
  • Support for providing your own caching solution
  • Its in 0.1.0, can I use it? Sure! I will personally be deploying this to prod. It's only in pre 1.0 because there some extra features I want to add before the 1.0 release (see roadmap)

Watch this introduction video from Simon Vrachliotis (@simonswiss) ↓ The "why" behind tailwind-merge

Advanced Examples

You might also want to check out the advanced example at /cmd/examples/advanced

Provide Your Own or Extend Default Config

import (
		// Note the import path here is different from the default path. This is so you have access to all the custom functions, structs, etc that are used to build the twmerge config
		twmerge "github.com/Oudwins/tailwind-merge-go/pkg/twmerge"
)
var TwMerger twmerge.TwMergeFn
func main() {
	// get the default config
	config := twmerge.MakeDefaultConfig()

	// do your modifications here

	// create the merger
	TwMerger = twmerge.CreateTwMerge(config, nil) // config, cache (if nil default will be used)


	// example usage
	m := TwMerger("px-4 px-10", "p-20")
	fmt.Println(m) // output: "p-20"
}

Provide your own Cache

The default cache is a LRU Cache and should be acceptable for most use cases. However, you might want to provide your own cache or modify the default creation parameters. Your cache must implement the interface defined at /pkg/cache/cache.go

type ICache interface {
	Get(string) string
	Set(string, string) // key, value
}

Here is an example of manually creating the default cache with a custom max capacity

import (
		twmerge "github.com/Oudwins/tailwind-merge-go/pkg/twmerge"
		lru "github.com/Oudwins/tailwind-merge-go/pkg/lru"
)
var TwMerger twmerge.TwMergeFn
func main() {
	customCapacity := 10000
	cache := lru.make(customCapacity)


	// create the merger
	TwMerger = twmerge.CreateTwMerge(nil, cache) // config, cache (if nil default will be used)

	// example usage
	m := TwMerger("px-4 px-10", "p-20")
	fmt.Println(m) // output: "p-20"
}

Contributing

Checkout the contributing docs

Roadmap

  • Improve cache concurrent performance by locking on a per key basis -> https://github.com/EagleChen/mapmutex
  • Build the class map on initialization and have a simple config style
  • replace regex with more performant solution
  • Move arbitrary value delimeters '[' & ']' to config somehow?
  • Plugins & easy plugin api.

Acknowledgments

  • Credit for all the hard work goes to dcastil/tailwind-merge.
    • For the tests I used
    • For the approach and the code. I mostly translated from js to go
    • For the logo
  • Big thank you to tylantz/go-tailwind-merge/ for pushing me to finally do this by writing a very interesting version of this same idea (I encourage you to check it out) and for the code to generate a go test file based on tailwind-merge's tests