{"action":"created","issue":{"url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/156","repository_url":"https://api.github.com/repos/tailwindcss/tailwindcss","labels_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/156/labels{/name}","comments_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/156/comments","events_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/156/events","html_url":"https://github.com/tailwindcss/tailwindcss/issues/156","id":272276122,"number":156,"title":"Feature request: text styles","user":{"login":"benface","id":1059139,"avatar_url":"https://avatars0.githubusercontent.com/u/1059139?v=4","gravatar_id":"","url":"https://api.github.com/users/benface","html_url":"https://github.com/benface","followers_url":"https://api.github.com/users/benface/followers","following_url":"https://api.github.com/users/benface/following{/other_user}","gists_url":"https://api.github.com/users/benface/gists{/gist_id}","starred_url":"https://api.github.com/users/benface/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benface/subscriptions","organizations_url":"https://api.github.com/users/benface/orgs","repos_url":"https://api.github.com/users/benface/repos","events_url":"https://api.github.com/users/benface/events{/privacy}","received_events_url":"https://api.github.com/users/benface/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-11-08T17:06:47Z","updated_at":"2017-11-08T18:08:57Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"It would be nice if, in addition to fonts, text sizes, font weights, line heights, letter spacings, and text colors, we could define \"text styles\" (aka \"character styles\" or \"paragraph styles\") which could combine any of those properties.\r\n\r\nThe way I see it working, it would be possible to use names representing values defined in the config, like this:\r\n\r\n```\r\ntextStyles: {\r\n    'h1': {\r\n        'font': 'serif',\r\n        'textSize': '3xl',\r\n        'fontWeight': 'bold',\r\n    },\r\n},\r\n```\r\n\r\n...or we could use values directly (which are not necessarily used anywhere else in the config):\r\n\r\n```\r\ntextStyles: {\r\n    'h1': {\r\n        'font': ['Constantia', 'Lucida Bright', 'Lucidabright'],\r\n        'textSize': '1.875rem',\r\n        'fontWeight': 700,\r\n    },\r\n},\r\n```\r\n\r\nAll properties are optional and the ones that aren't defined simply inherit as per CSS. The above would generate a `style-h1` class, and maybe it could be possible to override some of its properties like this:\r\n\r\n```\r\n<h1 class=\"style-h1 font-light\">Title</h1>\r\n```\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/comments/342904569","html_url":"https://github.com/tailwindcss/tailwindcss/issues/156#issuecomment-342904569","issue_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/156","id":342904569,"user":{"login":"reinink","id":882133,"avatar_url":"https://avatars0.githubusercontent.com/u/882133?v=4","gravatar_id":"","url":"https://api.github.com/users/reinink","html_url":"https://github.com/reinink","followers_url":"https://api.github.com/users/reinink/followers","following_url":"https://api.github.com/users/reinink/following{/other_user}","gists_url":"https://api.github.com/users/reinink/gists{/gist_id}","starred_url":"https://api.github.com/users/reinink/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reinink/subscriptions","organizations_url":"https://api.github.com/users/reinink/orgs","repos_url":"https://api.github.com/users/reinink/repos","events_url":"https://api.github.com/users/reinink/events{/privacy}","received_events_url":"https://api.github.com/users/reinink/received_events","type":"User","site_admin":false},"created_at":"2017-11-08T18:08:57Z","updated_at":"2017-11-08T18:08:57Z","author_association":"OWNER","body":"Hey there @benface! Thanks for your interest in Tailwind CSS! Generally we have tried to not mix more than one CSS property into each utility. It only happens in maybe one or two places in the whole framework, in very [unique situations](https://github.com/tailwindcss/tailwindcss/blob/05b5bbd741f2e4c9c6ae1f316bda9fb187bf65b4/src/generators/floats.js#L13-L16).\r\n\r\nGenerally when you start mixing utilities, what you're really doing is creating components. I think this is a great use-case for some `.style-h{x}` as components. For example:\r\n\r\n```less\r\n@responsive {\r\n  .style-h1 { @apply .font-serif .text-3xl .font-bold }\r\n  .style-h2 { @apply .font-serif .text-2xl .font-bold }\r\n  .style-h3 { @apply .font-serif .text-xl .font-bold }\r\n  .style-h4 { @apply .font-serif .text-xl }\r\n}\r\n```\r\n\r\nYou can read more about extracting components [here](https://tailwindcss.com/docs/extracting-components).\r\n\r\nI hope that makes sense! Good luck! 💪🏻 "}}
{"actor":{"display_login":"reinink"}}