Create 2019-03-08-restructuring-my-tailwindjs-config-files.md
This commit is contained in:
parent
a3cfd541b3
commit
a677ca6b41
|
|
@ -0,0 +1,191 @@
|
|||
---
|
||||
title: Restructuring my tailwind.js configuration files
|
||||
excerpt: How I’ve started structuring my tailwind.js configuration files in preparation for Tailwind 1.0.
|
||||
tags:
|
||||
- laravel-mix
|
||||
- tailwind-css
|
||||
---
|
||||
After watching Adam Wathan’s recent ["Working on Tailwind 1.0" YouTube video](https://www.youtube.com/watch?v=SkTKN38wSEM) and seeing some of the proposed changes to the `tailwind.js` configuration file, I’ve started to structure my current config files a little differently in preparation for 1.0.
|
||||
|
||||
## The current tailwind.js file format
|
||||
|
||||
Currently when you run `tailwind init` to create a new config file, it includes all of Tailwind’s default values, and then you can add, edit and remove values as needed.
|
||||
|
||||
Some values like colours, font families, plugins and modules you are likely to change for each project, whilst others like shadows, leading, z-index and opacity, you’re less likely to need to change.
|
||||
|
||||
It’s 952 lines including comments, which is quite long and could potentially be daunting for new Tailwind users.
|
||||
|
||||
The contents of the full file can be found in the [Tailwind CSS documentation](https://tailwindcss.com/docs/configuration#default-configuration), or it can be found in [various GitHub repositories](https://github.com/tailwindcss/plugin-examples/blob/master/tailwind.js).
|
||||
|
||||
## A preview of the new tailwind.js file format
|
||||
|
||||
In Adam’s [Laracon Online](https://laracon.net) talk, Tailwind CSS by Example, he showed the new configuration file format. Here is a snippet:
|
||||
|
||||
```js
|
||||
module.exports {
|
||||
theme: {
|
||||
extend: {
|
||||
spacing: {
|
||||
7: '1.75rem',
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
white: {
|
||||
default: '#fff',
|
||||
20: 'rgba(255,255,255,.2)',
|
||||
40: 'rgba(255,255,255,.4)',
|
||||
60: 'rgba(255,255,255,.6)',
|
||||
80: 'rgba(255,255,255,.8)',
|
||||
},
|
||||
...
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You’ll notice that the structure of the file is quite different, and that all of the default values have been removed and are now maintained by Tailwind itself.
|
||||
|
||||
This means that the configuration file contains only your custom changes, where you've either overridden a default value (e.g. colours) or added your own using `extend` (e.g. adding another spacing value, as in this example).
|
||||
|
||||
I think that's a great improvement and makes the file so much cleaner, and easier to read and understand.
|
||||
|
||||
## An interim approach
|
||||
|
||||
If you don’t want to wait until 1.0, or potentially 0.8, you can get some of this functionality now by restructuring your Tailwind configuration file.
|
||||
|
||||
Here is the complete `tailwind.js` file for the [DrupalCamp Bristol 2019 static landing page](https://dcb-2019-static.netlify.com), which uses Tailwind in addition to the existing traditional CSS:
|
||||
|
||||
```js
|
||||
let defaultConfig = require('tailwindcss/defaultConfig')()
|
||||
|
||||
var colors = {
|
||||
...defaultConfig.colors,
|
||||
black: '#000',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
...defaultConfig,
|
||||
colors: colors,
|
||||
textColors: colors,
|
||||
backgroundColors: colors,
|
||||
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
|
||||
plugins: [
|
||||
require('tailwindcss-interaction-variants')(),
|
||||
require('tailwindcss-spaced-items'),
|
||||
],
|
||||
modules: {
|
||||
...defaultConfig.modules,
|
||||
textStyle: [...defaultConfig.modules.textStyle, 'hocus'],
|
||||
},
|
||||
options: {
|
||||
...defaultConfig.options,
|
||||
prefix: 'tw-',
|
||||
important: true,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Here are the steps that I took to create this file:
|
||||
|
||||
<ol class="spaced-y-6">
|
||||
<li>
|
||||
<p markdown="1">**Get the default configuration**. This is done using `require('tailwindcss/defaultConfig')()`. Essentially this has the same contents as the current `tailwind.js` file, though now it’s owned and maintained within Tailwind itself, and not by the user.</p>
|
||||
<p>Also any new or updated values within the default configuration will be automatically available.</p>
|
||||
<p markdown="1">This line is present but commented out in the current generated `tailwind.js` file.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p markdown="1">**Create the colors object.** This will by default override Tailwind’s default colours, however you can add `...defaultConfig.colors` to include them and then add or edit values as needed.</p>
|
||||
<p markdown="1">In this example, I’m overridding the value used for the `black` colour classes to match the existing colour in the other CSS.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p markdown="1">**Return the main configuration object.** For sites with no overrides, this could just be `module.exports = defaultConfig` for a minimal configuration.</p>
|
||||
<p markdown="1">To extend the defaults, add `...defaultConfig` at the beginning.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p markdown="1">**Assign our colours.** Use them for `colors`, `textColors`, `backgroundColors` and `borderColours`.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p markdown="1">**Add any plugins**. I use plugins on most projects, in this case I’m using [tailwindcss-interaction-variants](https://www.npmjs.com/package/tailwindcss-interaction-variants) and [tailwindcss-spaced-items](https://www.npmjs.com/package/tailwindcss-spaced-items). Usually the default `container` plugin would be here too.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p markdown="1">**Add or override modules.** Here I’m adding the `hocus` (hover and focus) variant provided by the interaction variants plugin to the text style classes.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p markdown="1">**Add or override options.** As this markup was originally from a Drupal website, I needed to override some of the options values. I’ve added the `tw-` prefix to avoid Tailwind classes from clashing with Drupal’s default markup, and set all Tailwind classes to use `!important` so that they override any existing styles.</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
This file is only 27 lines long, so considerably shorter than the default file, and I think that it’s much easier to see what your additional and overridden values are, as well able to quickly recognise whether a class is generated from a custom value or from a Tailwind default value.
|
||||
|
||||
To move this file to the new format I think would be much easier as there’s no default configuration to filter out, and you can move across only what is needed.
|
||||
|
||||
## Other changes
|
||||
|
||||
### Consistent spacing for padding and margin
|
||||
|
||||
Similar to defining colours, you could also set some standard spacing values, and using those for padding, margin and negative margin to ensure that they are all consistent.
|
||||
|
||||
In this case, we can use `defaultConfig.margin` to get the default, add or override any values, and then assign it to the relevant sections of the main object.
|
||||
|
||||
```js
|
||||
const spacing = {
|
||||
...defaultConfig.margin,
|
||||
'2px': '2px',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
...defaultConfig,
|
||||
// ...
|
||||
padding: spacing,
|
||||
margin: spacing,
|
||||
negativeMargin: spacing,
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Picking values with lodash
|
||||
|
||||
In the opposite to extending, if we wanted to limit the number of values within a part of the configuration, we can do that too. I’d suggest using the [pick method](https://lodash.com/docs/4.17.11#pick) provided by [Lodash](https://lodash.com).
|
||||
|
||||
From the documentation:
|
||||
|
||||
> Creates an object composed of the picked object properties.
|
||||
|
||||
For example, if we only wanted normal, medium and bold font weights:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
...defaultConfig,
|
||||
// ...
|
||||
fontWeights: _.pick(defaultConfig.fontWeights, ['normal', 'medium', 'bold']),
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Renaming the file
|
||||
|
||||
Also in Tailwind 1.0, it seems that the configuration file name is changing from `tailwind.js` to `tailwind.config.js`.
|
||||
|
||||
If you use [Laravel Mix](https://laravel-mix.com) and the [Laravel Mix Tailwind plugin](https://github.com/JeffreyWay/laravel-mix-tailwind) like I do on this site (even though it’s a Sculpin site), it will look for a `tailwind.js` file by default or you can specify whatever filename you need.
|
||||
|
||||
Here is an excerpt of the Tailwind configuration file for this site, using `tailwind.config.js`:
|
||||
|
||||
```js
|
||||
mix.postCss('assets/css/app.css', 'source/dist/css')
|
||||
.tailwind('tailwind.config.js')
|
||||
```
|
||||
|
||||
## Looking foward to Tailwind CSS 1.0!
|
||||
|
||||
Adam has said that Tailwind 1.0 should be released within a few weeks of the time of writing this, I assume once [the 1.0 To-Do list](https://github.com/tailwindcss/tailwindcss/issues/692) is completed.
|
||||
|
||||
I really like some of the improvements that are coming in 1.0, including the new configuration file format and the ability to easily add and extend values, as well as the file itself now being completely optional.
|
||||
|
||||
I can’t wait for it to land!
|
||||
Reference in a new issue