
## What is tailwindcss?

Tailwind CSS is a modern CSS framework that super-charges website development by giving developers access to hundreds of CSS utility classes, flexible configuration and super helpful tooling. Roll all of this together, and you've got a modern, super fast toolkit for rapdily building fast, beautiful and functional websites.

> A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

_from [tailwindcss.com](https://tailwindcss.com/)_

## Benefits of using tailwindcss

Tailwind CSS brings with it a host of benefits both for the developer, and for the user:

- **It's modern:** Fantastic support for CSS preprocessors out of the box, enabling the developer to work with technologies like Sass, Less and Stylus
- **It's mobile-first:** Stellar support for mobile-first and responsive design, providing breakpoint classes to make styling your elements at different screen sizes a breeze
- **It's scalable:** A comprehensive, intuitive design system that scales with your team
- **It's optimised:** Unused CSS is removed and the compiled CSS minimised, contributing to quick page loads and reducing the bandwidth needed for users to load your site.

Learn more about tailwindcss from the developers that made it. Check out [tailwindcss.com](https://tailwindcss.com/)

## Installation

Before setting up tailwindcss, the following requirements need to be met:
- [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install)

The following npm depdencies are used:
- **autoprefixer:** automatically adds vendor-specific preixes (`::-moz, ::webkit`, etc.) to your CSS selectors so you don't have to. This dependency is required by tailwindcss
- **cross-env:** lets us run our scripts (defined under "scripts" in package.json) with environment variables across multiple platforms
- **postcss:** used to transpile modern CSS syntaxes (sass, scss, less, etc.) to vanilla CSS that a browser can read
- **postcss-cli:** enables us to trigger postcss in our package.json scripts

Create a new file called `package.json` in your theme's directory and add the following:

```
{
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "cross-env": "^7.0.3",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "^3.1.3"
  },
  "scripts": {
    "watch": "cross-env TAILWIND_MODE=watch postcss src/css/tailwind.css -o build/css/tailwind.css -w",
    "build": "cross-env NODE_ENV=production TAILWIND_MODE=build postcss src/css/tailwind.css -o build/css/tailwind.css"
  }
}
```

Once saved, run an `npm install` to install the required dependencies.

## Configuration

### postcss.config.js
In order to tell postcss to use tailwind and autoprefixer, you need to create a postcss.config.js file in your theme directory:

```
// postcss.config.js
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}
```

### tailwind.config.js
You must also create a tailwind.config.js file in order to tell tailwind which files to keep an eye on. The following config will get you started:

```
module.exports = {
  content: ["**/*.php", "*.php"],
  theme: {},
  plugins: []
}
```

### Enqueuing tailwind's CSS

Both the watch and build commands define the output path (the path where tailwindcss will spit its transpiled, optimised, vanilla CSS) as build/css/tailwind.css. Feel free to change this, but make sure you enqueue the CSS file somewhere so WordPress picks it up and delivers it.

```
add_action('wp_enqueue_scripts', function ()
{
    $rel_path_build_css = '/build/css/tailwind.css';
    wp_enqueue_style(
        'site-style',
        get_template_directory_uri() . $rel_path_build_css,
        array(),
        filemtime(get_stylesheet_directory() . $rel_path_build_css)
    );
}
```

## Running tailwindcss

Once you've installed all the dependencies and told WordPress where to find the transpiled CSS, you can run tailwindcss by running `npm run build` to quick off the build process.

Alternatively - and this is easier while developing - you can ask tailwindcss to wait for changes and automatically build by running `npm run watch`.

## Development

tailwindcss will look for any tailwind classes used in your *.php files and add them to the output CSS file defined in the previous steps. All you need to do is use a class and run `npm run build`, or run `npm run watch` and simply save your PHP file to kick off the build process automatically.

That's it! You now have the full power of tailwindcss at your fingertips to use in your WordPress theme.

## Further reading
- [Get started with Tailwind CSS (tailwindcss.com)](https://tailwindcss.com/docs/installation/using-postcss)
- [Tailwind in 100 seconds (Fireship on youtube.com)](https://www.youtube.com/watch?v=mr15Xzb1Ook)

WordPress & tailwindcss: quickly build responsive WordPress themes

Support tickets are a great way to deal with server issues. They can be made visible to multiple staff members or  specific roles, they provide a straight-forward and official avenue to report server issues and communicate with staff members, and they also keep users out of staff DMs!

I spent a few hours adding them to my language learning Discord bot, Babel, and was surprised at how easy it was.

**Note:** my bot uses the [Discord.NET](https://github.com/discord-net/Discord.Net) library, and the bot is built with C# and dotnet core, though you can apply this logic to whichever library you use.

## Features

This article describes how to add tickets that offer:
- opening tickets via reactions
- closing tickets via reactions
- creating private channels visible only to the user and those you've configured to see ticket channels

## Outline

In total, the ticketing functionality consists of the following parts:
- **TicketService** for offering the core ticket functionality
- **TicketHandler** for listening and responding to Discord.NET events

## Writing the ticket service

The ticket service will provide us with the core functionality for opening and closing tickets, as well as a few methods we can use to check if a user has a ticket already, and if a given channel is actually a ticket channel.

The ticket service consists of a class and an interface. The interface defines the following members:

```c#
public interface ITicketService
{
    /// <summary>
    /// Closes the user's open ticket (if they have one open)
    /// </summary>
    Task CloseTicketAsync(IGuild guild, ulong userId);
    
    /// <summary>
    /// Closes a user's ticket based on a given ticket channel.
    /// If the given channel is not a ticket channel, then an ArgumentException is thrown.
    /// </summary>
    Task CloseTicketAsync(IGuildChannel channel);

    /// <summary>
    /// Creates a ticket for a user.
    /// </summary>
    /// <returns></returns>
    Task CreateTicketAsync(IGuild guild, ulong forUserId);

    /// <summary>
    /// Checks if a user has a ticket. If yes, returns true.
    /// </summary>
    Task<bool> DoesUserHaveTicketAsync(IGuild guild, ulong userId);

    /// <summary>
    /// Checks if a channel is a ticket channel.
    /// </summary>
    bool IsTicketChannel(IChannel channel);
}
```

### Creating a ticket

The code for creating a ticket needs to:
- check that the user doesn't already have a ticket
- create the ticket channel in the correct category (as the category permissions will hide ticket channels from regular users)
- give the creator permission to see their own ticket
- send a short informational message to the ticket channel
- add the 🔒 emoji to the message, which will close the ticket if clicked 

```c#
private const string TicketChannelNamePrefix = "ticket-";

public async Task CreateTicketAsync(IGuild guild, ulong forUserId)
{
    const ulong TICKET_CHANNEL_CATEGORY_ID = 205011892434368993;

    if (await DoesUserHaveTicketAsync(guild, forUserId))
        throw new InvalidOperationException("User already has a thread.");

    ITextChannel channel = await guild.CreateTextChannelAsync(GetTicketChannelName(forUserId), props =>
    {
        props.CategoryId = TICKET_CHANNEL_CATEGORY_ID;
    });

    IUser user = await _discordClient.GetUserAsync(forUserId);

    await channel.AddPermissionOverwriteAsync(user, new OverwritePermissions(
        viewChannel: PermValue.Allow));
    
    IUserMessage introMessage = await channel.SendMessageAsync("[your intro message]");
    await introMessage.AddReactionAsync(new Emoji("🔒"));
}

public async Task<bool> DoesUserHaveTicketAsync(IGuild guild, ulong userId)
    => (await guild.GetChannelsAsync()).Any(x => x.Name == GetTicketChannelName(userId));

string GetTicketChannelName(ulong userId) => $"{TicketChannelNamePrefix}{userId}";
```

As a simple method of checking if a user already has a ticket, we can loop through a guild's channels and count any channels with a specific prefix as a ticket channel.

### Closing a ticket
Now that we can create a ticket, we can define the logic for closing a ticket. To do this, we must:
- check if a user has an open ticket channel
- if so, delete the channel

```c#
public async Task CloseTicketAsync(IGuild guild, ulong userId)
{
    ITextChannel? channel = await GetTicketChannelForUser(guild, userId);
    if (channel is not null)
        await channel.DeleteAsync();
}

async Task<ITextChannel?> GetTicketChannelForUser(IGuild guild, ulong userId)
    => (ITextChannel?)(await guild.GetChannelsAsync())
        .FirstOrDefault(x => x.Name == GetTicketChannelName(userId));

```

Again, as a simple check to grab a user's ticket channel, since the user ID is used in every ticket channel name, we can check if any channels exist with the defined ticket channel prefix, followed by the user's ID.

## Writing the ticket handler

The ticket handler's job is to hook onto relevant Discord events and do something with them. In our case, we need to hook onto the reaction event to close a ticket.

There are two specific scnearios we need to deal with:
- A user reacts with a padlock emoji 🔒 within the ticket channel and the ticket channel is closed.
- A user reacts to a specific message with the envelope emoji ✉️ and a new ticket is created. 

Using the functionality exposed by the ticket service we created before, this is fairly straight-forward:

```c#
private const ulong TICKET_CREATION_MESSAGE_ID = 4893573495345;

public async Task OnReactionAdded(
    Cacheable<IUserMessage, ulong> cachedMessage,
    ISocketMessageChannel originChannel,
    SocketReaction reaction)
{
    IUserMessage message = await cachedMessage.DownloadAsync();

    if (!reaction.User.IsSpecified || reaction.User.Value.IsBot)
        return;

    var guildChannel = originChannel as IGuildChannel;
    if (guildChannel is null)
        return;

    if (reaction.Emote.Name == "🔒" && _ticketService.IsTicketChannel(originChannel))
    {
        await _ticketService.CloseTicketAsync(guildChannel);
    }
    else if (
        reaction.Emote.Name == "✉️"
        && message.Id == TICKET_CREATION_MESSAGE_ID)
    {
        if (await _ticketService.DoesUserHaveTicketAsync(guildChannel.Guild, reaction.UserId))
            return;

        await _ticketService.CreateTicketAsync(guildChannel.Guild, reaction.UserId);
        await message.RemoveReactionAsync(reaction.Emote, reaction.User.Value);
    }
}

public void Register()
{
    var socketClient = (DiscordSocketClient)_discordClient;
    socketClient.ReactionAdded += OnReactionAdded;
}
```

Now all we need to do isinject/create an instance of TicketHandler somewhere, and call the `Register()` method to bind our event listeners.


Blog

WordPress & tailwindcss: quickly build responsive WordPress themes

Adding support ticket functionality to a Discord bot

Want to work with us?

Email

WhatsApp & Signal

Call