opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Run prettier on all *.md files

Browse source 
```
prettier '{app,source}/**/**.md' --write
```
This commit is contained in:
Oliver Davies 2020-03-08 17:52:59 +00:00
parent a3ceeaf0f3
commit 85a10c545b
170 changed files with 5127 additions and 2282 deletions
Download patch file Download diff file Expand all files Collapse all files

110
source/_posts/restructuring-my-tailwindjs-config-files.md
View file

@ -1,26 +1,42 @@
---
title: Restructuring my tailwind.js configuration files
date: 2019-03-08
excerpt: How I’ve started structuring my tailwind.js configuration files in preparation for Tailwind 1.0.
excerpt:
How I’ve started structuring my tailwind.js configuration files in preparation
for Tailwind 1.0.
tags:
- laravel-mix
- tailwind-css
- 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.
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.
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.
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.
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).
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:
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 {
@ -45,25 +61,32 @@ module.exports {
}
```
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.
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).
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.
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.
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:
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')()
let defaultConfig = require('tailwindcss/defaultConfig')();
var colors = {
...defaultConfig.colors,
black: '#000',
}
};
module.exports = {
...defaultConfig,
@ -84,7 +107,7 @@ module.exports = {
prefix: 'tw-',
important: true,
},
}
};
```
Here are the steps that I took to create this file:
@ -123,23 +146,32 @@ Here are the steps that I took to create this file:
</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.
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.
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.
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.
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,
@ -148,12 +180,15 @@ module.exports = {
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).
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:
@ -167,26 +202,37 @@ module.exports = {
// ...
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`.
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.
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`:
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')
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.
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 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!