Tachyons: How to use css if installed with npm?

Created on 20 Dec 2015 · 10Comments · Source: tachyons-css/tachyons

I'm really inexperienced with loading css via npm, just need a little bit of example documentation on how I might do that? You say in your docs that it's an option to use npm to install tachyons modules, but there's no mention of how to actually then use it.

Can I simply:

_main.js_

require('tachyons-widths');

Do I need some special config with webpack? css-loader?

Thanks for any help, just need pushed in the right direction. Library looks interesting!

Source

nackjicholson

Most helpful comment

Hi @nackjicholson. Sounds like you're a little confused by the whirlwind of activity that is happening around front end tools and build chains. There are so many different ways to do the same thing with similar tools and processes.

npm
For front end stuff, npm is used for bringing modules into your development process not production. So CSS doesn't usually get loaded by npm into your published html content (ie in the <head>).

You would use npm to get Tachyons into your dev environment so that you can style web pages w/ it.

So starting fresh using npm would look something like:

$ mkdir new && cd new # create and move to ur workspace

$ npm init # initialize a package.json file

$ npm install --save-dev tachyons # install Tachyons into node_modules/ and list Tachyons as a dev dependency in package.json

$ ls node_modules/tachyons/css # shows you tachyons.css and tachyons.min.css

(you'll also see bootstrap.min.css in that directory, that's a bug)

At this point you _could_ link to node_modules/tachyons/css/tachyons.min.css in your html pages for style, but that'd be weird (cause you generally don't upload node_modules/ to a production server).

So if you just want to use vanilla Tachyons, copy tachyons.min.css to wherever you normally put your production-ready css files and link to it from your html and you're all set.

Customizing Tachyons
If you want to customize Tachyons, follow the instructions starting here on Tachyons' npm page.

Developing with Tachyons by default is based around gulp and rework (via basswork).

Webpack (and css-loader, etc)
This is a bundling and build process that is separate from default Tachyons stuff. There's lots of posts and videos for learning webpack. The tutorial is not a bad place to start.

brianzelip on 21 Dec 2015

👍17

All 10 comments

@nackjicholson - there are a few ways that you can reference css if installing with npm. One is to reference the path to the css for the module you want to include

<link rel="stylesheet" href="node_modules/tachyons-widths/css/tachyons-widths.min.css" type="text/css" media="screen" title="Tachyons Widths" charset="utf-8">

There are several other ways to include tachyons into your build system that I can document for you later if you're including it with js. @johnotander has a nice build system in the works so that you can grab any combination of tachyons modules you want and they'll get pulled from npm but then be copied over to a local css source directory so that they can be modified locally. Hope this helps get you started. Will give more examples later.

mrmrs on 21 Dec 2015

You would use npm to get Tachyons into your dev environment so that you can style web pages w/ it.

So starting fresh using npm would look something like:

$ mkdir new && cd new # create and move to ur workspace

$ npm init # initialize a package.json file

$ npm install --save-dev tachyons # install Tachyons into node_modules/ and list Tachyons as a dev dependency in package.json

$ ls node_modules/tachyons/css # shows you tachyons.css and tachyons.min.css

(you'll also see bootstrap.min.css in that directory, that's a bug)

So if you just want to use vanilla Tachyons, copy tachyons.min.css to wherever you normally put your production-ready css files and link to it from your html and you're all set.

Customizing Tachyons
If you want to customize Tachyons, follow the instructions starting here on Tachyons' npm page.

Developing with Tachyons by default is based around gulp and rework (via basswork).

brianzelip on 21 Dec 2015

👍17

Using individual Tachyons modules
If you're looking to bring individual Tachyons modules into some existing css, and want to automate the process as opposed to copying/pasting by hand the built module css, or as opposed to calling another link in the html (ie <link rel="stylesheet" href="path/to/module/css/tachyons-widths">), then you can do that using some kind of pipeline and package.json.

Instead of using a javascript require like you write above, you would use a css @import and a tool like postcss which is what Tachyons uses - see the first example here.

brianzelip on 21 Dec 2015

👍1

@brianzelip thanks a lot for taking the time to write this out :)

mrmrs on 21 Dec 2015

@mrmrs @brianzelip Thank you both for helping me out! Very much appreciated! :joy: :smile:

nackjicholson on 21 Dec 2015

Not sure if a new issue is warranted. Therefore I ask it here:
Why would you need to use the tachyon-cli exactly? Because a gross of the tachyons will work just importing them using PostCSS and https://github.com/postcss/postcss-import

The modules that are causing issues are using custom properties. It seems to me that, from a development experience perspective, using @import would be better. Thoughts? :)

swennemans on 19 Feb 2016

Hey @swennemans, the tachyons-cli is entirely optional for users. It's main value is its use in the build system as we use it to package up compiled CSS with the source CSS in the individual modules and the main Tachyons module as well. As we make progress on the build system we will begin incorporating more ways to easily customize a Tachyons install, too. But, that's an item for the future.

The most streamline development flow would indeed be using @import and then compiling the source with the required plugins for Tachyons (import/css-variables/custom-media). They are packaged up already with the tachyons-cli so one can run:

tachyons path/to/file.css > dist/css/c.css

However, you can also create your own build system with gulp, grunt or a bash script that uses the PostCSS CLI directly.

Hope this helps, let me know if you have any more questions.

johno on 19 Feb 2016

@johnotander Sorry, I've missed your comment. Thanks for your explanation :)

I was missing the custom-media plugin for the @import to work with some tachyons modules.

swennemans on 29 Feb 2016

For future reference this is my current config to compile Tachyons without tachyons-cli:

// postcss.config.js

const cssImport = require('postcss-import');
const cssnext = require('postcss-cssnext');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    cssImport({
      path: ['styles/'],
    }),
    autoprefixer({
      browsers: ['last 2 versions', 'IE >= 10'],
    }),
    cssnext({
      features: {
        customProperties: {
          preserve: true,
        },
      },
      warnForDuplicates: false,
    }),
  ],
};

jiayihu on 21 Jul 2017

👍2

@brianzelip thanks for writing out that comment, came here from an unrelated search trying to figure out how to use a different set of css installed through npm and benefited anyway. very helpful.